Вы можете обойти это, заменив объект (и, следовательно, связать область):
def foo(a=[]):
a = list(a)
a.append(5)
return a
Ужасно, но он работает.
Используйте insertAdjacentHTML, если он доступен, в противном случае используйте какой-то резерв. insertAdjacentHTML будет поддерживаться в Firefox 8, а также поддерживается в Safari 4, Chrome, IE и Opera, в соответствии с https://developer.mozilla.org/en/DOM/element.insertAdjacentHTML
div.insertAdjacentHTML( 'beforeend', str );
Live demo: http://jsfiddle.net/euQ5n/
Это приемлемо?
var child = document.createElement('div');
child.innerHTML = str;
child = child.firstChild;
document.getElementById('test').appendChild(child);
jsFiddle .
Но, Ответ Нила является лучшим решением.
innerHTML
?
– alex
6 September 2011 в 23:55
str
имеет один элемент верхнего уровня.
– Chris Calo
24 October 2011 в 07:08
Идея состоит в том, чтобы использовать innerHTML
в промежуточном элементе, а затем переместить все его дочерние узлы туда, где вы действительно хотите их через 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);
}
Это позволяет избежать уничтожения любого события обработчики на div#test
, но все же позволяют добавлять строку HTML.
Правильный способ использует insertAdjacentHTML
. В Firefox раньше 8 вы можете вернуться к использованию Range.createContextualFragment
, если ваш str
не содержит тегов script
.
Если ваш str
содержит метки script
, вам нужно удалить script
из фрагмента, возвращаемого createContextualFragment
, перед вставкой фрагмента. В противном случае скрипты будут запущены. (insertAdjacentHTML
отмечает, что скрипты не исполняются.)
createContextualFragment
. Я искал способ заставить некоторые html включать скрипты, запущенные только в том случае, если пользователь соглашается установить cookie.
– schliflo
9 May 2018 в 15:40
Quick Hack:
<script>
document.children[0].innerHTML="<h1>QUICK_HACK</h1>";
</script>
Использовать Случаи:
1: Сохранить как .html-файл и запуститься в chrome или firefox или edge. (IE не работает)
2: Использовать в http://js.do
В действии: http://js.do / HeavyMetalCookies / quick_hack
Разбито с комментариями:
<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>
Причина Почему я опубликовал:
У JS.do есть два обязательных объекта:
Но не отображается сообщение console.log. Пришел сюда, чтобы найти быстрое решение. Я просто хочу увидеть результаты нескольких строк кода блокнота, другие решения - слишком много работы.
Вот несколько тестов производительности:
<div id="container"></div>
И 4 решения:
document.getElementById('container').innerHTML += '<p>Just some <span>text</span> here</p>';
$('#container').append('<p>Just some <span>text</span> here</p>');
var div = document.createElement("div");
div.innerHTML = '<p>Just some <span>text</span> here</p>';
document.getElementById('container').appendChild(div)
document.getElementById('container').insertAdjacentHTML('beforeend', '<p>Just some <span>text</span> here</p>');
Настройка среды (2018.07.02) MacOs High Sierra 10.13.3 на Chrome 67.0.3396.99 (64-разрядная ), Safari 11.0.3 (13604.5.6), Firefox 59.0.2 (64-разрядная версия)):
Как видим, insertAdjacentHTML является (Safari 110M операций в секунду, Chrome 65M, Firefox 39M), поэтому простой javascript быстрее, чем jQuery (во всех браузерах). ВнутреннийHTML + = ... медленнее, чем jQuery для всех браузеров.
Вы можете повторить тест на вашем компьютере здесь: https://jsperf.com/insert-html-ttest
Почему это неприемлемо?
document.getElementById('test').innerHTML += str
будет способом учебника.
#test
. Это обычно нежелательно.
– alex
6 September 2011 в 23:57
Позиции beforebegin и afterend работают только в том случае, если узел находится в дереве и имеет родительский элемент. - https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML
Это может решить
document.getElementById("list-input-email").insertAdjacentHTML('beforeend', '<div class=""><input type="text" name="" value="" class="" /></div>');
InnerHTML очистить все данные, такие как событие для существующих узлов
append child with firstChild добавляет только первого дочернего элемента в innerHTML. Например, если нам нужно добавить:
<p>text1</p><p>text2</p>
, будет отображаться только текст1
. Об этом:
добавляет специальный тег к innerHTML, добавляя дочерние и затем отредактируйте externalHTML, удалив тег, который мы создали. Не знаю, насколько он умен, но он работает для меня, или вы можете изменить внешнийHTML на innerHTML, поэтому ему не нужно использовать функцию replace
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>
innerHTML
помещает строку в элемент (заменяя всех дочерних элементов), тогда какinsertAdjacentHTML
помещает его (1) перед элементом, (2) после элемента, (3) внутри элемента перед первым ребенка или (4) внутри элемента после последнего ребенка. – Šime Vidas 7 September 2011 в 00:14insertAdjacentHTML
быстрее, чем добавление кinnerHTML
, потому чтоinsertAdjacentHTML
не сериализует и не повторяет существующие дочерние элементы этого элемента. – hsivonen 21 October 2011 в 18:31insertAdjacentHTML
сохраняет значения измененных элементов формы, тогда как добавление кinnerHTML
перестраивает элемент и теряет весь контекст формы. – Brandon Gano 2 April 2013 в 18:20