Блог

Главная - Вопросы по программированию - Как преобразовать jQuery append в javascript vanilla?

Как преобразовать jQuery append в javascript vanilla?

#javascript

#javascript

Вопрос:

Я пытаюсь использовать следующий метод Javascript:

 document.createElement('div');

Но вот мой код jQuery и HTML для генерации :

 var add_html = "<div class='card'><a href='#'><div'><img class='img-fluid' src='" image "' alt='picture'><div class='card-body'><h5 class='card-title'>" name "</h5></div></div></a></div>";
$("#my_div").append(add_html);

Как я могу это сделать, используя ванильный javascript?

Цель состоит в том, чтобы использовать в bricklayer.append(document.createElement('div'));

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

1. .innerHTML может быть использован в ванильном javascript

2. document.getElementById("my_div").append(add_html)

3. Я думаю, что вы ищете document.appendChild

4. Я получил следующую ошибку Не удалось выполнить ‘appendChild’ на ‘Node’: параметр 1 не имеет типа ‘Node’.

5. @EthanVu appendChild принимает узел в качестве аргумента, а не строку HTML.

Ответ №1:

Вы можете попробовать использовать insertAdjacentHTML() как следующий способ:

 var image = '/../john.jpg'
var name = 'John';
var add_html = "<div class='card'><a href='#'><div'><img class='img-fluid' src='" image "' alt='picture'><div class='card-body'><h5 class='card-title'>" name "</h5></div></div></a></div>";

document.getElementById('my_div').insertAdjacentHTML('afterend', add_html); 
 <div id="my_div"></div>

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

1. Все еще получаю Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.

Ответ №2:

 <!doctype html>
<html lang="en">
<head>
  <title>Hello World</title>
  <meta charset="utf-8">
  <script>
window.addEventListener('load', function () {
    var image = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==';
    var name = 'Hello World';
    var div = document.getElementById('my_div').appendChild( document.createElement('div') );
    div.classList.add('card');
    
    var a = div.appendChild( document.createElement('a') );
    a.href = '#';
    
    var anotherDiv = a.appendChild( document.createElement('div') );
    var img = anotherDiv.appendChild( document.createElement('img') );
    img.classList.add('img-fluid');
    img.src = image;
    img.alt = 'picture';
    
    var anotherNotherDiv = anotherDiv.appendChild( document.createElement('div') );
    anotherNotherDiv.classList.add('card-body');
    var h5 = anotherNotherDiv.appendChild( document.createElement('h5') );
    h5.classList.add('card-title');
    h5.innerText = name;
});
  </script>
</head>
<body>
    <div id="my_div"></div>
</body>
</html>

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

1. Существует некоторая синтаксическая ошибка, createEelement и вот результат : <div class="card"></div>

2. из-за того, что я неправильно Element написал, может случиться

Ответ №3:

Вы можете создать элемент, добавить его, а затем изменить внешний HTML-код.

Используйте шаблонный литерал для удобства сопровождения кода.

 const
  div   = document.createElement('div'),
  name  = 'Hello World',
  image = 'http://placekitten.com/g/280/120';

document.querySelector('#my-div').append(div);

div.outerHTML = `
  <div class="card">
    <a href="#">
      <div'>
        <img class="img-fluid" src="${image}" alt="picture">
        <div class="card-body">
          <h5 class="card-title">${name}</h5>
        </div>
      </div>
    </a>
  </div>
`; 
 #my-div {
  display: flex;
  justify-content: center;
}

.card {
  border: thin solid grey;
  padding: 0.5em;
}

.card-body > .card-title {
  text-align: center;
  margin: 0.5em;
} 
 <div id="my-div"></div>

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

1. Мне нужно использовать в bricklayer.append(document.createElement('div'));