Я хочу добавить свой HTML из javascript без jQuery

#javascript

Вопрос:

.appendChild у меня не работает, все, что я хочу сделать, это добавить HTML-код в моем javascript const bottomText в DOM без jQuery

    const bottomText = `
        <div class="bottom-text row">
          <div class="column column-left">test
            <p>xx%<span></span></p>
          </div>
          <div class="column column-right">
          <p>test</p>
          </div>
        </div>
        <hr>
        `;
document.getElementById("piechart").appendChild(bottomText);

И мой html

 <body>
    <div class="graphs">
        <div class="pie-chart" id="piechart">
        </div>
        <script src="./js/pie.js"></script>
        <script src="./js/linegraph.js"></script>
    </div>
</body>

Почему это не работает? с jquery это работает, но для этого проекта они хотят, чтобы я использовал только vanilla js

Ответ №1:

appentChild() принимает узел в качестве параметра. Если вы хотите добавить строку, содержащую вы можете использовать insertAdjacentHTML()

 document.getElementById("piechart").insertAdjacentHTML("beforeend",bottomText);

Документы MDN:https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML

1. Это правильное решение. Я бы добавил документы для полноты и понимания первого аргумента developer.mozilla.org/en-US/docs/Web/API/Element /…

2. @arieljuod Если вы хотите отредактировать ответ, добро пожаловать

Ответ №2:

Для использования .appendChild() сначала вы должны создать элемент:

 let element = document.createElement("div");
    document.body.appendChild(element);

1. Для справки, я не голосовал против, но я могу предположить, что для этого могут быть две причины — ваш код просто создает empty <div> и добавляет его в конец целевого узла ( body в данном случае) и НЕ вставляет пользовательский HTML. Во-вторых, может быть, манипулирование DOM таким образом может быть намного медленнее, чем добавление HTML-кода напрямую с insertAdjacentHTML() , как предложено другим ответом. Что, кстати, я предполагаю, является причиной того, что insertBefore() ответ не получил столько положительных отзывов.

2. element.innerHTML = "some text"; Добавлять любой HTML-код с insertAdjacentHTML() — плохая практика.

Ответ №3:

Вы можете использовать .insertBefore()

Метода insertAfter() нет. Его можно эмулировать, объединив метод insertBefore с Node.nextSibling.

 function myFunction() {
  var node = document.createElement('li');

  node.innerHTML = '<strong>Water</strong>'

  var list = document.getElementById("myList1");
  list.insertBefore(node, list.childNodes[0]);
}

 <ul id="myList1">
  <li>Coffee</li>
  <li>Tea</li>
</ul>

<p>Click the button to move an item from one list to another</p>

<button onclick="myFunction()">Try it</button>