Javascript add elements in div

Вставьте HTML в div с помощью JavaScript/jQuery

В этом посте мы обсудим, как вставить HTML в div в JavaScript и jQuery.

1. Использование jQuery

С помощью jQuery вы можете использовать .append() метод для вставки указанного HTML в качестве последнего дочернего элемента контейнера div.

JS

HTML

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

JS

HTML

2. Использование JavaScript

В простом JavaScript innerHTML Свойство часто используется для замены содержимого элемента. Чтобы вставить HTML в контейнер, а не заменять все его содержимое, вы можете использовать += оператора, как показано ниже:

JS

HTML

Вместо прямого изменения innerHTML , вы должны использовать appendChild() метод.

JS

HTML

Кроме того, в JavaScript есть нативный метод insertAdjacentHTML() для вставки HTML в документ. Он принимает позицию относительно элемента, которая может быть:

• ‘beforebegin’ : Перед самим элементом.
• ‘afterbegin’ : прямо внутри элемента, перед его первым дочерним элементом.
• ‘beforeend’ : Сразу внутри элемента, после его последнего дочернего элемента.
• ‘afterend’ : после самого элемента.

JS

HTML

Вот и все, что касается вставки HTML в div в JavaScript и jQuery.

Средний рейтинг 4.69 /5. Подсчет голосов: 32

Голосов пока нет! Будьте первым, кто оценит этот пост.

Сожалеем, что этот пост не оказался для вас полезным!

Расскажите, как мы можем улучшить этот пост?

Спасибо за чтение.

Пожалуйста, используйте наш онлайн-компилятор размещать код в комментариях, используя C, C++, Java, Python, JavaScript, C#, PHP и многие другие популярные языки программирования.

Как мы? Порекомендуйте нас своим друзьям и помогите нам расти. Удачного кодирования 🙂

Этот веб-сайт использует файлы cookie. Используя этот сайт, вы соглашаетесь с использованием файлов cookie, нашей политикой, условиями авторского права и другими условиями. Читайте наши Политика конфиденциальности. Понятно

Источник

JavaScript CreateElement

Summary: in this tutorial, you will learn how to use the JavaScript document.createElement() to create a new HTML element and attach it to the DOM tree.

To create an HTML element, you use the document.createElement() method:

let element = document.createElement(htmlTag);Code language: JavaScript (javascript)

The document.createElement() accepts an HTML tag name and returns a new Node with the Element type.

1) Creating a new div example

Suppose that you have the following HTML document:

html> html> head> meta charset="utf-8"> title>JS CreateElement Demo title> head> body> body> html>Code language: HTML, XML (xml)

The following example uses the document.createElement() to create a new element:

let div = document.createElement('div');Code language: JavaScript (javascript)

And add an HTML snippet to the div :

div.innerHTML = 'p>CreateElement example p>';Code language: HTML, XML (xml)

To attach the div to the document, you use the appendChild() method:

document.body.appendChild(div);Code language: CSS (css)

html> html> head> meta charset="utf-8"> title>JS CreateElement Demo title> head> body> script> let div = document.createElement('div'); div.id = 'content'; div.innerHTML = '
CreateElement example
'; document.body.appendChild(div); script> body> html>Code language: HTML, XML (xml)

Adding an id to the div

If you want to add an id to a div , you set the id attribute of the element to a value, like this:

let div = document.createElement('div'); div.id = 'content'; div.innerHTML = '
CreateElement example
'; document.body.appendChild(div);Code language: JavaScript (javascript)

Adding a class to the div

The following example set the CSS class of a new div note :

let div = document.createElement('div'); div.id = 'content'; div.className = 'note'; div.innerHTML = '
CreateElement example
'; document.body.appendChild(div);Code language: JavaScript (javascript)

Adding text to a div

To add a piece of text to a , you can use the innerHTML property as the above example, or create a new Text node and append it to the div :

// create a new div and set its attributes let div = document.createElement('div'); div.id = 'content'; div.className = 'note'; // create a new text node and add it to the div let text = document.createTextNode('CreateElement example'); div.appendChild(text); // add div to the document document.body.appendChild(div);Code language: JavaScript (javascript)

Adding an element to a div

To add an element to a div , you create an element and append it to the div using the appendChild() method:

let div = document.createElement('div'); div.id = 'content'; div.className = 'note'; // create a new heading and add it to the div let h2 = document.createElement('h2'); h2.textContent = 'Add h2 element to the div'; div.appendChild(h2); // add div to the document document.body.appendChild(div); Code language: JavaScript (javascript)

2) Creating new list items ( li ) example

Let’s say you have a list of items:

ul id="menu"> li>Home li> ul> Code language: HTML, XML (xml)

The following code adds two li elements to the ul :

let li = document.createElement('li'); li.textContent = 'Products'; menu.appendChild(li); li = document.createElement('li'); li.textContent = 'About Us'; // select the ul menu element const menu = document.querySelector('#menu'); menu.appendChild(li); Code language: JavaScript (javascript)

ul id="menu"> li>Home li> li>Products li> li>About Us li> ul>Code language: HTML, XML (xml)

3) Creating a script element example

Sometimes, you may want to load a JavaScript file dynamically. To do this, you can use the document.createElement() to create the script element and add it to the document.

The following example illustrates how to create a new script element and loads the /lib.js file to the document:

let script = document.createElement('script'); script.src = '/lib.js'; document.body.appendChild(script);Code language: JavaScript (javascript)

You can first create a new helper function that loads a JavaScript file from an URL:

function loadJS(url) < let script = document.createElement('script'); script.src = url; document.body.appendChild(script); >Code language: JavaScript (javascript)

And then use the helper function to load the /lib.js file:

loadJS('/lib.js');Code language: JavaScript (javascript)

To load a JavaScript file asynchronously, you set the async attribute of the script element to true :

function loadJSAsync(url) < let script = document.createElement('script'); script.src = url; script.async = true; document.body.appendChild(script); >Code language: JavaScript (javascript)

Summary

• The document.createElement() creates a new HTML element.
• The element.appendChild() appends an HTML element to an existing element.

Источник

HTML DOM Element appendChild()

The appendChild() method appends a node (element) as the last child of an element.

See Also:

Related Document Methods:

Syntax

Parameters

Return Value

More Examples

To create a paragraph with a text.

• Create a paragraph element
• Create a text node
• Append the text node to the paragraph
• Append the paragraph to the document.

Create a

element and append it to a element:

const para = document.createElement(«p»);
const node = document.createTextNode(«This is a paragraph.»);

Create a

element and append it to the document’s body:

const para = document.createElement(«P»);
const node = document.createTextNode(«This is a paragraph.»);

Browser Support

element.appendChild() is a DOM Level 1 (1998) feature.

It is fully supported in all browsers:

Chrome	Edge	Firefox	Safari	Opera	IE
Yes	Yes	Yes	Yes	Yes	9-11

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник