Как добавить контент в тело html с помощью JS?

У меня есть много <section> в моем html <body> и вы хотите добавить больше через javascript. Однако использование innerHTML просто заменяет мои существующие разделы новыми, а не добавляет их к старым.

Что еще я могу использовать?

Ответы

Ответ 1

Вы можете использовать

document.getElementById("parentID").appendChild(/*..your content created using DOM methods..*/)

или

document.getElementById("parentID").innerHTML+= "new content"

Ответ 2

Я думаю, что если вы хотите добавить контент непосредственно в тело, лучший способ это:

document.body.innerHTML = document.body.innerHTML + "bla bla";

Чтобы заменить его, используйте:

document.body.innerHTML = "bla bla";

Ответ 3

Попробуйте использовать следующий синтаксис:

document.body.innerHTML += "<p>My new content</p>";

Ответ 4

Я только что натолкнулся на подобное решение вопроса с включенной статистикой производительности.

Кажется, что приведенный ниже пример быстрее:

document.getElementById('container').insertAdjacentHTML('beforeend', '<div id="idChild"> content html </div>');

Ответ 5

Вероятно, вы используете

document.getElementById('element').innerHTML = "New content"

Попробуйте это вместо:

document.getElementById('element').innerHTML += "New content"

Или, предпочтительно, используйте DOM Манипуляция:

document.getElementById('element').appendChild(document.createElement("div"))

Работа с Dom будет предпочтительнее по сравнению с использованием innerHTML, потому что innerHTML просто выгружает строку в документ. Браузеру придется переписать весь документ, чтобы получить его.

Ответ 6

В большинстве браузеров вы можете использовать переменную javascript вместо document.getElementById. Скажем, ваш контент html body выглядит следующим образом:

<section id="mySection"> Hello </section>

Затем вы можете просто ссылаться на mySection как на переменную в javascript:

mySection.innerText += ', world'
// same as: document.getElementById('mySection').innerText += ', world'

Смотрите этот фрагмент:

mySection.innerText += ', world!'

<section id="mySection"> Hello </section>

Ответ 7

Рабочая демонстрация:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
onload = function(){
var divg = document.createElement("div");
divg.appendChild(document.createTextNode("New DIV"));
document.body.appendChild(divg);
};
</script>
</head>
<body>

</body>
</html>

Ответ 8

Просто:

    document.getElementById('myDiv').innerHTMl += "New Content";

Ответ 9

Убедитесь, что у вас есть тег <html> или тег .

    document.getElementsByTagName('html').appendChild("New Content");

или

    document.getElementsByTagName('p')[0].appendChild("New Content");

Вы можете изменить 0 из ^ порядка . Как , и он будет добавлен к первому . Прокомментируйте, если какая-то проблема возникла.