带时间轴歌词示例_带有示例JavaScript externalHTML

culing2941

于 2020-09-17 09:04:56 发布

阅读量235

点赞数

文章标签： javascript js css dom html5 ViewUI

原文链接：https://www.thecrazyprogrammer.com/2020/01/javascript-outerhtml-with-example.html

版权

带时间轴歌词示例

In this tutorial, I will tell you about outerHTML in javascript. outerHTML provides developers with a lot of power. By this property, you can get whole element value with its HTML Like this:

在本教程中，我将向您介绍javascript中的externalHTML。 externalHTML为开发人员提供了强大的功能。通过此属性，您可以使用其HTML获得整个元素值，如下所示：

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

It is a valid string comprising a combination of text and tags.

它是有效的字符串，包含文本和标签的组合。

There are other properties that can also be used to get the contents of an element such as innerText, innerHTML etc. But outerHTML returns the full HTML code for the element,including the element itself.

还有其他属性也可以用来获取元素的内容，例如innerText，innerHTML等。但是，outerHTML返回该元素的完整HTML代码，包括元素本身。

This property is not working on some HTML elements such as html, head, body, frameSet, tBody. When the property is set, the given string simply substitutes the object, including its start and end tags.

此属性不适用于某些HTML元素，例如html，head，body，frameSet，tBody。设置属性后，给定的字符串将简单替换对象，包括其开始和结束标记。

Example:

例：

<html>
<head>
	<title>Outerhtml Demo</title>
	
	<style type="text/css">
		div.highlightedElement{
			background-color: red;
			padding: 10px;
		}
	</style>
 
	<script 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 overwrites the element, while innerHTML replaces all children but not the element itself. If there are event handlers on the element, outerHTML also deletes the event handlers.

externalHTML会覆盖元素，而innerHTML会替换所有子元素，但不会替换元素本身。如果元素上有事件处理程序，则externalHTML也会删除事件处理程序。

It is a property of dom/HTMLElementdom/HTMLElement.

它是dom / HTMLElementdom / HTMLElement的属性。

Example:

例：

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

You can use outerHTML as a wrapper.

您可以将externalHTML用作包装器。

Example:

例：

<style>
.wrapper {border: 2px solid gainsboro}
</style>
 
<figure id = "inner">
  <svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
</figure>
 
<div class = "demo"> <button 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>

As we see in the above code outerHTML is the content of an element together with the element itself, outerHTML is working as a wrapper. For example, if an element or an entire part is to be packed into a div element.

正如我们在上面的代码中看到的，外部HTML是元素的内容以及元素本身，外部HTML充当包装器。例如，如果要将一个元素或整个零件打包到div元素中。