Javascript - dołącz kod HTML do elementu kontenera bez innerHTML

167

Potrzebuję sposobu, aby dołączyć kod HTML do elementu kontenera bez użycia innerHTML. Powodem, dla którego nie chcę używać innerHTML, jest to, że kiedy jest używany w ten sposób:

element.innerHTML += htmldata

Działa poprzez zastąpienie całego kodu HTML przed dodaniem starego i nowego HTML. To nie jest dobre, ponieważ resetuje dynamiczne multimedia, takie jak osadzone filmy flash ...

Mógłbym to zrobić w ten sposób, który działa:

var e = document.createElement('span');
e.innerHTML = htmldata;
element.appendChild(e);

Jednak problem z tym sposobem polega na tym, że w dokumencie jest teraz dodatkowy tag span, którego nie chcę.

Jak więc można to zrobić? Dzięki!

Pion
źródło
1
Dlaczego nie skorzystać z Jquery? Sprawdź moją szczegółową odpowiedź poniżej. stackoverflow.com/a/50482776/5320562
Loukan ElKadi

Odpowiedzi:

102

Aby dać alternatywę (ponieważ używanie DocumentFragmentwydaje się nie działać): Możesz to zasymulować, iterując po elementach potomnych nowo wygenerowanego węzła i tylko je dołączać.

var e = document.createElement('div');
e.innerHTML = htmldata;

while(e.firstChild) {
    element.appendChild(e.firstChild);
}
Felix Kling
źródło
2
Myślałem, że szukamy rozwiązania, które nie używa "innerHTML"
kennydelacruz
1
@kennydelacruz: OP nie chciał dołączyć nowego kodu HTML do istniejącego HTML, ponieważ niszczy i odtwarza istniejące elementy. OP znalazł rozwiązanie, tworząc nowy element i dołączając go, ale nie chcieli dodawać dodatkowego elementu. Właśnie rozszerzyłem to rozwiązanie, aby pokazać, że mogą przenosić / dołączać nowo utworzone elementy, które nie mają wpływu na istniejące elementy.
Felix Kling,
Wiem, że to jest stare, ale czy ktoś może mi wyjaśnić, dlaczego można iterować po e.firstChild?
Toastgeraet
1
@Toastgeraet: To jest przykład nie jest iteracja ciągu e.firstChild . Raczej sprawdza, czy ema dziecko, a jeśli tak, przesuń to dziecko do elementu.
Felix Kling
570

Dziwię się, że żadna z odpowiedzi nie wspomina o insertAdjacentHTML()metodzie. Sprawdź to tutaj . Pierwszym parametrem jest miejsce, w którym chcesz dołączyć ciąg i trwa („przed rozpoczęciem”, „po rozpoczęciu”, „przed końcem”, „po”). W sytuacji OP użyłbyś „przed końcem”. Drugi parametr to po prostu ciąg html.

Podstawowe użycie:

var d1 = document.getElementById('one');
d1.insertAdjacentHTML('beforeend', '<div id="two">two</div>');
alnafie
źródło
53
Właśnie wypróbowałem Twoje rozwiązanie, a także zaakceptowane. Obie działają, ale twoja ma tylko 2 linie i żadnych pętli. Dla mnie brzmi jak zwycięzca.
Corwin 01
3
Dla odniesienia dla każdego, kto może wybrać tę trasę: Ta metoda nie działa dobrze na stołach w IE9.
Corwin 01
2
W Chrome to mi mówi Uncaught TypeError: undefined is not a function!
J86
19
Ten ukryty klejnot wymaga większej ekspozycji.
Seth
Otrzymasz błąd, jeśli spróbujesz użyć tej metody na czymś, co nie jest węzłem, tylko do Twojej wiadomości.
Alex W
15

alnafie ma świetną odpowiedź na to pytanie. Chciałem podać przykład jego kodu w celach informacyjnych:

var childNumber = 3;

function addChild() {
  var parent = document.getElementById('i-want-more-children');
  var newChild = '<p>Child ' + childNumber + '</p>';
  parent.insertAdjacentHTML('beforeend', newChild);
  childNumber++;
}
body {
  text-align: center;
}
button {
  background: rgba(7, 99, 53, .1);
  border: 3px solid rgba(7, 99, 53, 1);
  border-radius: 5px;
  color: rgba(7, 99, 53, 1);
  cursor: pointer;
  line-height: 40px;
  font-size: 30px;
  outline: none;
  padding: 0 20px;
  transition: all .3s;
}
button:hover {
  background: rgba(7, 99, 53, 1);
  color: rgba(255,255,255,1);
}
p {
  font-size: 20px;
  font-weight: bold;
}
<button type="button" onclick="addChild()">Append Child</button>
<div id="i-want-more-children">
  <p>Child 1</p>
  <p>Child 2</p>
</div>

Mam nadzieję, że jest to pomocne dla innych.

Trevor Nestman
źródło
2
Nienawidzę trzymać się zasad, ale myślę, że byłoby lepiej, gdybyś utworzył demo (jsfiddle, codepen itp.), A następnie dodał to do odpowiedzi Alnafie, używając funkcji edycji lub przesyłając komentarz. Tworzenie odpowiedzi tylko w celu zademonstrowania odpowiedzi innego użytkownika nie polega na tym, jak działa SO, niezależnie od tego, jak przydatne są podane przez Ciebie informacje. Wyobraź sobie, że każdy użytkownik zdecydowałby się zademonstrować inną odpowiedź, tworząc odpowiedź - byłoby bałagan.
Martin James
2
<div id="Result">
</div>

<script>
for(var i=0; i<=10; i++){
var data = "<b>vijay</b>";
 document.getElementById('Result').innerHTML += data;
}
</script>

przypisz dane do div za pomocą symbolu „+ =”, możesz dołączyć dane, w tym poprzednie dane HTML

vijay
źródło
11
Pytanie konkretnie wymaga nie używania element.innerHTML += data.
musicnothing
1

Do tego DocumentFragmentbyło przeznaczone.

var frag = document.createDocumentFragment();
var span = document.createElement("span");
span.innerHTML = htmldata;
for (var i = 0, ii = span.childNodes.length; i < ii; i++) {
    frag.appendChild(span.childNodes[i]);
}
element.appendChild(frag);

document.createDocumentFragment, .childNodes

Raynos
źródło
Właśnie to przetestowałem i nie działa. Czy tak powinno być używane?
Bob
Skąd się wybierasz (a)? Czy to literówka.
Ash Burlaczenko
1
Tak, to pomyłka, powinno to być e. Nie sądzę, aby można było użyć innerHTML dla fragmentu. To nie działa
Bob,
@Bob, zdecydowałem się na użycie jQuery do wymykania się spod kontroli.
Raynos
jQuery no no! Nie zamierzam uwzględniać jQuery tylko dla jednej małej funkcji: \ To jest po prostu przesada
Bob.
-1

Jak łowić i używać ścisłego kodu. Na dole tego wpisu potrzebne są dwie funkcje wstępne.

xml_add('before', id_('element_after'), '<span xmlns="http://www.w3.org/1999/xhtml">Some text.</span>');

xml_add('after', id_('element_before'), '<input type="text" xmlns="http://www.w3.org/1999/xhtml" />');

xml_add('inside', id_('element_parent'), '<input type="text" xmlns="http://www.w3.org/1999/xhtml" />');

Dodaj wiele elementów (przestrzeń nazw musi znajdować się tylko w elemencie nadrzędnym):

xml_add('inside', id_('element_parent'), '<div xmlns="http://www.w3.org/1999/xhtml"><input type="text" /><input type="button" /></div>');

Dynamiczny kod wielokrotnego użytku:

function id_(id) {return (document.getElementById(id)) ? document.getElementById(id) : false;}

function xml_add(pos, e, xml)
{
 e = (typeof e == 'string' && id_(e)) ? id_(e) : e;

 if (e.nodeName)
 {
  if (pos=='after') {e.parentNode.insertBefore(document.importNode(new DOMParser().parseFromString(xml,'application/xml').childNodes[0],true),e.nextSibling);}
  else if (pos=='before') {e.parentNode.insertBefore(document.importNode(new DOMParser().parseFromString(xml,'application/xml').childNodes[0],true),e);}
  else if (pos=='inside') {e.appendChild(document.importNode(new DOMParser().parseFromString(xml,'application/xml').childNodes[0],true));}
  else if (pos=='replace') {e.parentNode.replaceChild(document.importNode(new DOMParser().parseFromString(xml,'application/xml').childNodes[0],true),e);}
  //Add fragment and have it returned.
 }
}
Jan
źródło