Вывод нескольких innerHTML

Question

Как правильно выводить несколько дивов за раз с помощью innerHTML?

var my_div = newDiv = null;

function addElement() {

  // Создаём новый элемент div
  // и добавляем в него немного контента

  var newDiv = document.createElement("div");
  newDiv.innerHTML = "<h1>Привет!</h1>";
  newDiv.innerHTML = "<h2>Пока!</h2>";

  // Добавляем только что созданный элемент в дерево DOM

  my_div = document.getElementById("org_div1");
  document.body.insertBefore(newDiv, my_div);
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>test</title>
</head>

<body>

  <div id='org_div1' onclick="addElement();">Текст выше сгенерирован автоматически.</div>

</body>

</html>

Answer 1

Как правильно выводить несколько дивов за раз с помощью innerHTML?

Например вот таким образом добавлять.

var my_div = newDiv = null;

function addElement() {

  // Создаём новый элемент div
  // и добавляем в него немного контента

  var newDiv = document.createElement("div");
  newDiv.innerHTML = "<h1>Привет!</h1>";
  newDiv.innerHTML += "<h2>Пока!</h2>";

  // Добавляем только что созданный элемент в дерево DOM

  my_div = document.getElementById("org_div1");
  document.body.insertBefore(newDiv, my_div);
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>test</title>
</head>

<body>

  <div id='org_div1' onclick="addElement();">Текст выше сгенерирован автоматически.</div>

</body>

</html>

Answer 2

Вот так:

var my_div = newDiv = null;

function addElement() {

  // Создаём новый элемент div
  // и добавляем в него немного контента

  var newDiv = document.createElement("div");
  newDiv.innerHTML += "<h1>Привет!</h1>";
  newDiv.innerHTML += "<h2>Пока!</h2>";

  // Добавляем только что созданный элемент в дерево DOM

  my_div = document.getElementById("org_div1");
  document.body.insertBefore(newDiv, my_div);
}

#org_div1 {
  cursor: pointer;
}

<div id='org_div1' onclick="addElement();">Текст выше сгенерирован автоматически.</div>

Answer 3

Ну или так:

var my_div = newDiv = null;

function addElement() {

  // Создаём новый элемент div
  // и добавляем в него немного контента

  var newDiv = document.createElement("div");
  newDiv.innerHTML +=
  "<h1>Привет!</h1>"
  + "<h2>Пока!</h2>";

  // Добавляем только что созданный элемент в дерево DOM

  my_div = document.getElementById("org_div1");
  document.body.insertBefore(newDiv, my_div);
}

#org_div1 {
  cursor: pointer;
}

<div id='org_div1' onclick="addElement();">Текст выше сгенерирован автоматически.</div>

БЛОГ НА HUSL

Вывод нескольких innerHTML

Ответы (3 шт):