Блог

Главная - JavaScript язык программирования - JavaScript outerHTML с примером
You are currently viewing JavaScript outerHTML с примером

JavaScript outerHTML с примером

В этом уроке я расскажу вам о outerHTML в javascript. outerHTML предоставляет разработчикам много возможностей. С помощью этого свойства вы можете получить значение всего элемента с его HTML-кодом следующим образом:

outerHTML = "<p>This is a Html element.</p>";

Это допустимая строка, содержащая комбинацию текста и тегов.

Существуют и другие свойства, которые также можно использовать для получения содержимого элемента, такого как innerText, innerHTML и т.д. Но outerHTML возвращает полный HTML — код элемента,включая сам элемент.

Это свойство не работает с некоторыми элементами HTML, такими как html, заголовок, тело, набор фреймов, тело. Когда свойство задано, данная строка просто заменяет объект, включая его начальный и конечный теги.

Пример:

<html>
<head>
<title> OuterhtmlDemo</title>
<type="text/css">
div.highlightedElement{
background-color: red;
padding: ;
}
</style>


<type="text/javascript">
function getValue() {
var oDiv = document.getElementById("div1");
console.log(oDiv.outerHTML);
}
</script>
</head>
 
<body>
<div id="div1" class="highlightedElement"><p>Hello World</p></div>
<input type="button" value="get HTML" onclick="getValue()" />
</body>
</html>

outerHTML перезаписывает элемент, в то время как innerHTML заменяет всех дочерних элементов, но не сам элемент. Если в элементе есть обработчики событий, outerHTML также удаляет обработчики событий.

Это свойство dom/HTMLElementdom/HTMLElement.

Пример:

  <figure id = "figureElem">
  <svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" width="4" fill="yellow" />
</svg>
     </figure>
<div class = "demo"> <id = "clearOuter"> Clear all </button> </div>
 
document.getElementById ('clearOuter'). onclick = function () {
   document.getElementById ('figureElem'). outerHTML = ";
console.log (document.getElementById ("figureElem")) // returns zero
}

Вы можете использовать outerHTML в качестве оболочки.

Пример:

<style>
.wrapper {border: 2px solid gainsboro}
</style>
 
<figure id = "inner">
  <svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" width="4" fill="yellow" />
</svg>
</figure>
 
<class = "demo"> <id = "wrap"> wrap in DIV </button> </div>
<script>
document.getElementById ("wrap"). onclick = function () {
   let inner = document.getElementById ("inner");
   inner.outerHTML = "<div class = 'wrapper'>" + inner.outerHTML + "</div>";
}
</script>

Как мы видим в приведенном выше коде, outerHTML-это содержимое элемента вместе с самим элементом, outerHTML работает как оболочка. Например, если элемент или вся деталь должны быть упакованы в элемент div.

Метки: