0

Есть код:

<html>

<head>
  <title>o</title>
</head>

<body>
  <button id="btn">Кнопка</button>
  <script type="text/javascript">
    btn.onclick = function() {
      if (!document.getElementById('img')) {
        var
          image = document.createElement('img');
        image.id = "img";
        image.src = "https://c.wallhere.com/photos/e7/46/landscape_nature-159249.jpg!d";
        document.body.appendChild(image)
      } {
        var dd = document.createElement(
          "br")
      }
    }
  </script>
  <p>Здесь</p>
</body>

</html>

Как можно сделать, чтобы изображение появлялось сверху слова "Здесь". Заранее спасибо!

1
  • Я понял задачу так: Если на странице нет картинки, то добавить её, иначе добавить <br>. Решение: jsfiddle.net/2cxevt1w/3 19 июн 2019 в 14:53

2 ответа 2

1

Есть метод insertBefore, он вставляет новый элемент перед тем, который укажете вторым параметром.

NOTE
Нужно понимать, что оба элемента ( и новый, и перед тем, которым вставляем ) должны быть дочерними элементами того элемента, у которого вызывается метод insertBefore

btn.onclick = function() {
  const targetElement = document.getElementById('paragraph');
  if (!document.getElementById('img')) {
    var image = document.createElement('img');
    image.id = "img";
    image.src = "https://c.wallhere.com/photos/e7/46/landscape_nature-159249.jpg!d";
    document.body.insertBefore(image, targetElement);
  }
}
<html>

<head>
  <title>o</title>
</head>

<body>
  <button id="btn">Кнопка</button>
  <p id='paragraph'>Здесь</p>
</body>

</html>

0

Самый простой вариант будет создать пустой div над "Здесь" и в него вставлять картинку.

<html>

<head>
  <title>o</title>
</head>

<body>
  <button id="btn">Кнопка</button>
  <script type="text/javascript">
    btn.onclick = function() {
      if (!document.getElementById('img')) {
        var
          image = document.createElement('img');
        image.id = "img";
        image.src = "https://c.wallhere.com/photos/e7/46/landscape_nature-159249.jpg!d";
        document.getElementById("imageArea").appendChild(image);
      } {
        var dd = document.createElement(
          "br")
      }
    }
  </script>
  <div id="imageArea"></div>
  <p>Здесь</p>
</body>

</html>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.