Jak dołączyć ten ciąg HTML
var str = '<p>Just some <span>text</span> here</p>';
do DIV z identyfikatorem 'test'
znajdującym się w DOM?
(Btw div.innerHTML += str;
jest nie do przyjęcia.)
Jak dołączyć ten ciąg HTML
var str = '<p>Just some <span>text</span> here</p>';
do DIV z identyfikatorem 'test'
znajdującym się w DOM?
(Btw div.innerHTML += str;
jest nie do przyjęcia.)
Odpowiedzi:
Użyj, insertAdjacentHTML
jeśli jest dostępny, w przeciwnym razie użyj jakiegoś rodzaju rezerwy. insertAdjacentHTML jest obsługiwany we wszystkich obecnych przeglądarkach .
div.insertAdjacentHTML( 'beforeend', str );
Demo na żywo: http://jsfiddle.net/euQ5n/
insertAdjacentHTML
jest szybsze niż dołączanie do innerHTML
, ponieważ insertAdjacentHTML
nie serializuje i ponownie analizuje istniejących elementów podrzędnych elementu.
insertAdjacentHTML
utrzymuje wartości odmiennych elementów formy, podczas gdy dodanie do innerHTML
odbudowuje element i traci całą zawartość formy.
Czy to jest dopuszczalne?
var child = document.createElement('div');
child.innerHTML = str;
child = child.firstChild;
document.getElementById('test').appendChild(child);
jsFiddle .
Ale , odpowiedź Neila jest lepszym rozwiązaniem.
innerHTML
?
insertAdjacentHTML
.
AppendChild
(E) jest ponad 2x szybsze niż inne rozwiązania na Chrome i Safari, insertAdjacentHTML
(F) jest najszybsze na Firefoxie. innerHTML=
(B) (nie mylić z +=
(A)) jest drugim szybkie rozwiązanie na wszystkich przeglądarkach i jest znacznie bardziej poręczny niż E i F.
Skonfiguruj środowisko (2019.07.10) MacOs High Sierra 10.13.4 w przeglądarce Chrome 75.0.3770 (64-bitowa), Safari 11.1.0 (13604.5.6), Firefox 67.0.0 (64-bitowa)
Możesz powtórzyć test na swoim komputerze tutaj
Chodzi o to, aby użyć innerHTML
elementu pośredniego, a następnie przenieść wszystkie jego węzły podrzędne tam, gdzie naprawdę chcesz, aby były przez appendChild
.
var target = document.getElementById('test');
var str = '<p>Just some <span>text</span> here</p>';
var temp = document.createElement('div');
temp.innerHTML = str;
while (temp.firstChild) {
target.appendChild(temp.firstChild);
}
Pozwala to uniknąć wymazania wszystkich div#test
programów obsługi zdarzeń, ale nadal umożliwia dołączenie ciągu kodu HTML.
Właściwy sposób to używanie insertAdjacentHTML
. W przeglądarce Firefox starszej niż 8 możesz wrócić do używania, Range.createContextualFragment
jeśli str
nie zawiera script
tagów.
Jeśli twoje str
zawierają script
tagi, musisz usunąć script
elementy z fragmentu zwróconego przez createContextualFragment
przed wstawieniem fragmentu. W przeciwnym razie skrypty będą działać. ( insertAdjacentHTML
oznacza skrypty niewykonalne.)
createContextualFragment
. Szukałem sposobu, aby niektóre pliki HTML były uruchamiane ze skryptami tylko wtedy, gdy użytkownik zgodzi się ustawić plik cookie.
Szybki hack :
<script>
document.children[0].innerHTML="<h1>QUICK_HACK</h1>";
</script>
Przypadki użycia :
1: Zapisz jako plik .html i uruchom w przeglądarce Chrome, Firefox lub Edge. (IE nie będzie działać)
2: Użyj w http://js.do
W akcji: http://js.do/HeavyMetalCookies/quick_hack
Podzielone komentarzami:
<script>
//: The message "QUICK_HACK"
//: wrapped in a header #1 tag.
var text = "<h1>QUICK_HACK</h1>";
//: It's a quick hack, so I don't
//: care where it goes on the document,
//: just as long as I can see it.
//: Since I am doing this quick hack in
//: an empty file or scratchpad,
//: it should be visible.
var child = document.children[0];
//: Set the html content of your child
//: to the message you want to see on screen.
child.innerHTML = text;
</script>
Powód, dla którego opublikowałem:
JS.do ma dwie niezbędne cechy:
Ale nie wyświetla komunikatów console.log. Przyjechałem tutaj, szukając szybkiego rozwiązania. Chcę tylko zobaczyć wyniki kilku wierszy kodu brudnopisu, inne rozwiązania to zbyt dużo pracy.
Dlaczego jest to niedopuszczalne?
document.getElementById('test').innerHTML += str
byłby podręcznikowym sposobem na zrobienie tego.
To może rozwiązać
document.getElementById("list-input-email").insertAdjacentHTML('beforeend', '<div class=""><input type="text" name="" value="" class="" /></div>');
InnerHTML usuwa wszystkie dane, takie jak zdarzenia dla istniejących węzłów
append child with firstChild dodaje tylko pierwsze dziecko do innerHTML. Na przykład, jeśli musimy dołączyć:
<p>text1</p><p>text2</p>
pojawi się tylko text1
A co z tym:
dodaje specjalny tag do innerHTML przez dołączenie child, a następnie edytuje externalHTML, usuwając utworzony przez nas tag. Nie wiem, jakie to inteligentne, ale działa dla mnie lub możesz zmienić externalHTML na innerHTML, więc nie musi używać funkcji zastępowania
function append(element, str)
{
var child = document.createElement('someshittyuniquetag');
child.innerHTML = str;
element.appendChild(child);
child.outerHTML = child.outerHTML.replace(/<\/?someshittyuniquetag>/, '');
// or Even child.outerHTML = child.innerHTML
}
<div id="testit">
This text is inside the div
<button onclick="append(document.getElementById('testit'), '<button>dadasasdas</button>')">To div</button>
<button onclick="append(this, 'some text')">to this</button>
</div>
Najkrótszy - 18 znaków (nie mylić +=
(wspomniane przez OP), =
więcej szczegółów tutaj )
test.innerHTML=str
innerHTML
umieszcza napis w elemencie (zastępując wszystkie dzieci), natomiastinsertAdjacentHTML
umieszcza go (1) przed elementem, (2) po elemencie, (3) wewnątrz elementu przed pierwszym dzieckiem, lub (4) wewnątrz elementu po ostatnim dziecku.