Добавление html на страницу js

Document: createElement() method

In an HTML document, the document.createElement() method creates the HTML element specified by tagName, or an HTMLUnknownElement if tagName isn’t recognized.

Syntax

createElement(tagName) createElement(tagName, options) 

Parameters

A string that specifies the type of element to be created. The nodeName of the created element is initialized with the value of tagName. Don’t use qualified names (like «html:a») with this method. When called on an HTML document, createElement() converts tagName to lower case before creating the element. In Firefox, Opera, and Chrome, createElement(null) works like createElement(«null») .

An object with the following properties:

The tag name of a custom element previously defined via customElements.define() . See Web component example for more details.

Return value

Note: A new HTMLElement is returned if the document is an HTMLDocument, which is the most common case. Otherwise a new Element is returned.

Examples

Basic example

This creates a new and inserts it before the element with the ID » div1 «.

HTML

doctype html> html lang="en-US"> head> meta charset="UTF-8" /> title>Working with elementstitle> head> body> div id="div1">The text above has been created dynamically.div> body> html> 

JavaScript

.body.onload = addElement; function addElement()  // create a new div element const newDiv = document.createElement("div"); // and give it some content const newContent = document.createTextNode("Hi there and greetings!"); // add the text node to the newly created div newDiv.appendChild(newContent); // add the newly created element and its content into the DOM const currentDiv = document.getElementById("div1"); document.body.insertBefore(newDiv, currentDiv); > 

Result

Web component example

The following example snippet is taken from our expanding-list-web-component example (see it live also). In this case, our custom element extends the HTMLUListElement , which represents the element.

// Create a class for the element class ExpandingList extends HTMLUListElement  constructor()  // Always call super first in constructor super(); // constructor definition left out for brevity // … > > // Define the new element customElements.define("expanding-list", ExpandingList,  extends: "ul" >); 

If we wanted to create an instance of this element programmatically, we’d use a call along the following lines:

let expandingList = document.createElement("ul",  is: "expanding-list" >); 

The new element will be given an is attribute whose value is the custom element’s tag name.

Note: For backwards compatibility with previous versions of the Custom Elements specification, some browsers will allow you to pass a string here instead of an object, where the string’s value is the custom element’s tag name.

Specifications

Browser compatibility

BCD tables only load in the browser

See also

• Node.removeChild()
• Node.replaceChild()
• Node.appendChild()
• Node.insertBefore()
• Node.hasChildNodes()
• document.createElementNS() — to explicitly specify the namespace URI for the element.

Found a content problem with this page?

This page was last modified on Jul 7, 2023 by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник

Вставка текста и html-кода в элементы страницы — Методы innerHTML, textContent и insertAdjacentHTML

Если Вы научились манипулировать положением элементов на странице (см. заметки «Действия с элементами — . «), то дальше нужно знать, как добавить текст или HTML-код непосредственно в элементы?

Работая с примером 2.1 из прошлой статьи, мы имели дело с простым элементом , у которого есть оболочка — это тег div и какое-то оформление — это класс black . Больше ничего этот элемент не содержит.

Здесь мы продолжим работать с тегом div — будем его редактировать. Допустим нам нужно вписать в него какой-то текст. Как это сделать?

Для этого существует два метода: innerHTML и textContent. А также метод insertAdjacentHTML, который позволяет вставить текст или код в любое место страницы .

Метод innerHTML — Вставка текста

Метод innerHTML позволяет вставить текст.

'use strict'; // Создаем новый элемент с указанным именем тега const div = document.createElement("div"); // Добавляем к div класс black div.classList.add('black'); // Добавляем в конец body тег div document.body.append(div); // Вставка текста в тег div div.innerHTML = "Hello world"; 

В тег div добавили текст Hello world .

Метод innerHTML — Вставка HTML-кода

Метод innerHTML позволяет вставить HTML-код.

Продолжим работать с предыдущим примером.

'use strict'; const div = document.createElement("div"); div.classList.add('black'); document.body.append(div); // Вставка кода div.innerHTML = "
Hello world
"; 

Текст Hello world заключили в заголовок h1 («Hello world» теперь не умещается в область тега div) .

Метод textContent — Вставка текста

Метод textContent позволяет вставить текст.

'use strict'; const div = document.createElement("div"); div.classList.add('black'); document.body.append(div); // Вставка текста в тег div div.textContent = "textContent"; 

В отличии от метода innerHTML — метод textContent работает только с текстом .

Если при помощи метода textContent пробовать вставить код, то он будет преобразован в строку.

Метод insertAdjacentHTML

Напоследок ответим на вопрос, как вставить HTML-код перед или после определенных тегов? Для этого существует метод insertAdjacentHTML.

Метод insertAdjacentHTML позволяет вставить HTML-код в любое место страницы.

Синтаксис метода insertAdjacentHTML

Сначала указывается элемент, относительно которого проводятся действия, и который называется опорным элементом.

опорный элемент.insertAdjacentHTML( «ключевое слово» , «код» );

Метод insertAdjacentHTML принимает два аргумента : первый — это одно из ключевых слов: afterbegin, afterend, beforebegin или beforeend. Второй аргумент метода insertAdjacentHTML — это HTML-код, который мы хотим вставить.

'use strict'; // Создаем новый элемент с указанным именем тега const div = document.createElement("div"); // Добавляем к div класс black div.classList.add('black'); // Добавляем к div стили div.style.cssText = 'width: 250px; height: 110px'; // Добавляем в конец body тег div document.body.append(div); // Вставка HTML-кода в начало и в конец элемента div.insertAdjacentHTML("afterbegin", '
afterbegin - В начало элемента
'); div.insertAdjacentHTML("beforeend", '
beforeend - В конец элемента
'); // Вставка HTML-кода после и перед элементом div.insertAdjacentHTML("afterend", '
afterend - После элемента
'); div.insertAdjacentHTML("beforebegin", '
beforebegin - Перед элементом
'); 

beforebegin - Перед элементом
 
afterbegin - В начало элемента
 
beforeend - В конец элемента
 
 
afterend - После элемента
 

Вот так при помощи метода insertAdjacentHTML происходит вставка HTML-кода в любое место страницы относительно опорного элемента.

Источник

How to append HTML using JavaScript?

Writing HTML code is easy, but when it comes to dynamic changes over the pages like appending HTML, you need to use unusual strategies. JavaScript is a powerful language to get such kinds of jobs done. You can easily use JavaScript to put the HTML code inside the template. We will discuss this in this write-up.

Through JavaScript, there are two ways to attach HTML code to a div tag.

• Using innerHTML property
• Inserting adjacent HTML using the insertAdjacentHTML() function

Using innerHTML attribute

To use the innerHTML property to attach code to an element (div), first pick the element (div) where you wish to append the code. Then, using the += operator on innerHTML, add the code wrapped as strings.

Here’s the syntax of the attribute.

Let’s take an example of this. First, we are going to be referring to the HTML element by using the property :

Therefore, let’s create a div> and put a h1> tag and a button> inside it.

< h1 >This is a LinuxHint Tutorial

As you can see, we have given an id of “test” to the div tag and placed the text that says “Append Paragraph” inside the button. With these, we have the following result on the screen

JavaScript code:

We have a button linked to a function named “buttonPressed()” in the script. But, we have not defined this function, and this button does not do anything. So, let’s create this function in the script that would add a paragraph in this div and count how many times we have added this paragraph. Take a look at the following code.

document. getElementById ( «test» ) . innerHTML +=

«

Yoo have append this paragraph » + i + » times» ;

Note: We have created a counter variable “i”. This will be used to keep a check on how many times have we append this paragraph inside the div tag.

Now, if we run the code and press the button we get:

Note: This technique essentially removes all of the div’s content and replaces it with new stuff. Any listeners linked to the child nodes of that div will be lost as a result. That is why we always concatenate it.

Using AdjacentHTML method

The insertAdjacentHTML() function can also be used to attach HTML code to a div. This method is comes in handy when it comes to appending HTML at some specific place. So it takes two parameters in this method:

• The location (in the document) where the code should be inserted (‘afterbegin’, ‘beforebegin’, ‘afterend’, ‘beforeend’).
  • afterbegin – right after the HTML element mentioned but inside the tag.
  • beforebegin – before the HTML element mentioned
  • afterend – after the closing tag of the HTML element
  • beforeend – inside the HTML element but before the closing tag

  This is the general syntax of the method

  HTMLelement.insertAdjacentHTML(‘LOCATION‘, ‘HTML CODE’);

  Let’s use the previous example. The same HTML code. However, this time the script would be slight different as:

  Note: Since we are using the previous example, the HTML code is exactly the same.

  JavaScript Code:

  i = 1 ;
  function buttonPressed ( ) {
  document. getElementById ( «test» ) . insertAdjacentHTML ( «beforebegin» ,
  «

  Appended » + i + » times Before Div

  » ) ;
  i ++;
  }

  Note: We are using the “beforebegin” property to append the tag before the start of the div.

  That’s it, you have learned how can we append some HTML code through JavaScript.

  Conclusion

  There are two methods that you can use to append the HTML code into a webpage. The first method is by using innerHTML while the second method is by using the AdjacentHTML method. In this article, we have taken examples of both the innerHTML and AdjacentHTML methods to append the HTML code into a webpage.

  About the author

  Shehroz Azam

  A Javascript Developer & Linux enthusiast with 4 years of industrial experience and proven know-how to combine creative and usability viewpoints resulting in world-class web applications. I have experience working with Vue, React & Node.js & currently working on article writing and video creation.

  Источник

  Читайте также:  Site parser на php