Блог

Главная - Вопросы по программированию - Можно ли использовать outerHTML с createElement

Можно ли использовать outerHTML с createElement

#javascript #dom

#javascript #dom

Вопрос:

Я читаю все элементы списка (необработанный HTML) с веб-страницы, сортирую их и теперь хочу повторно перечислить их в новом порядке. Я обнаружил, что атрибут outerHTML, по-видимому, не может быть установлен после использования createElement, и я думаю, что это недокументированное ограничение. В итоге я получаю пустые элементы списка (поэтому в настоящее время я использую innerHTML и удаляю встроенные li и /li). Ниже приведен простой неудачный пример. Мысли?

 const myList = document.querySelector("#ulist"); // the ID of an unordered list
let newHTML = document.createElement("li"); // have to start with something …
// newHTML.innerHTML = "This is the contents of the LI..."; // THIS WORKS!
newHTML.outerHTML = "<li>This is a new LI</li>"; // THIS DOES NOTHING!
myList.appendChild(newHTML);  
 <ul id="ulist">
</ul>

Комментарии:

1. developer.mozilla.org/en-US/docs/Web/API/Element/outerHTML «Если элемент не имеет родительского элемента, установка его свойства outerHTML не изменит его или его потомков. Многие браузеры также выдают исключение. »

2. Вы должны установить родительский newHTML элемент элемента, прежде чем сможете установить его outerHTML .

3. В этом случае имеет смысл установить innerHTML существующего элемента. В конце концов, если вы его создаете, используйте его. В противном случае вы делаете это без причины.

4. Таплер, спасибо; но чтобы уточнить, у меня уже есть полный список элементов HTML, который включает класс, поэтому было бы проще использовать его как есть. Тако, с объяснением вашего и Таплера, я думаю, это просто не сработает для меня, потому что у меня нет ничего, кроме элементов списка, и мне не нужен родитель. Если вы можете придумать, как я могу «исправить» это, пожалуйста, приведите пример; в противном случае, спасибо в любом случае!

5. @FredB — это не имеет смысла. Вы добавляете li к его родительскому элементу в последней строке вашего js-кода. Просто переместите его в перед назначением outerHTML. Но на самом деле думаю, что вам все равно лучше использовать insertAdjacentHTML on myList .

Ответ №1:

Как указал @Alohci в комментариях; вместо этого используйте insertAdjacentHTML(). Смежный означает близкий, близкий к, предшествующий или следующий. А с помощью insertAdjacentHTML() вы указываете, куда вы хотите вставить HTML-код по отношению к существующему контенту.

Пример использования:

 const myList = document.querySelector("#ulist");
myList.insertAdjacentHTML("beforeend", "<li>This is a new LI</li>");  
 <ul id="ulist"></ul>

Полезная визуализация значений положения из MDN:

 <!-- beforebegin -->
<p>
  <!-- afterbegin -->
  foo
  <!-- beforeend -->
</p>
<!-- afterend -->