获取元素的html标记内容(Get element's html tag content)

是否可以通过dom api获取节点的顶级标签html? 要清楚,如果我有

<div data-x="a">
    <span>Hello</span>
</div>

我想回到<div data-x="a">

在outerHTML上匹配的原始字符串是我能做的最好的,还是有快速直接的方法来实现我想要的?


Is it possible to get a node's top-level tag html via the dom api? To be clear, if I have

<div data-x="a">
    <span>Hello</span>
</div>

I want to just get back <div data-x="a">

Is a crude string matching on outerHTML the best I can do, or is there a fast and direct way to achieve what I want?

2023-03-28 21:03

满意答案

如果克隆节点,则innerHTML属性将为空。 对于您的示例,浅克隆是合适的(传递false或不传递任何东西)。

// get the div element
var element = document.querySelectorAll('div')[0];

// view the outerHTML of the element
console.log('original outerHTML', element.outerHTML);

// clone the element
var clone = element.cloneNode();

// view the outerHTML of the clone
console.log('outerHTML of clone', clone.outerHTML); // has what you want
<div data-x="a">
    <span>Hello</span>
</div>

MDN上的.cloneNode()


If you clone the node, the innerHTML property will be empty. For your example, a shallow clone is appropriate (pass false or don't pass anything).

// get the div element
var element = document.querySelectorAll('div')[0];

// view the outerHTML of the element
console.log('original outerHTML', element.outerHTML);

// clone the element
var clone = element.cloneNode();

// view the outerHTML of the clone
console.log('outerHTML of clone', clone.outerHTML); // has what you want
<div data-x="a">
    <span>Hello</span>
</div>

.cloneNode() on MDN

相关问答

更多

按内容删除HTML标记(remove HTML tag by content)

试试这个 <?php $domDoc = new DomDocument(); $domDoc->loadHTML($reportGen); $xpath = new DOMXpath($domDoc); $tags = $xpath->query('//td'); foreach($tags as $tag) { $value = $tag->nodeValue; if(preg_match('/^(Â )/',$value...

确定HTML元素的内容是否溢出(Determine if an HTML element's content overflows)

通常,您可以将client[Height|Width]与scroll[Height|Width] ,以便检测到...但是当溢出可见时,值将相同。 因此,检测程序必须说明这一点: // Determines if the passed element is overflowing its bounds, // either vertically or horizontally. // Will temporarily modify the "overflow" style to detect thi...

根据特定的html标记内容隐藏父元素(Hide a parent element based on specific html tag contents)

您可以使用html()函数获取每个li的html内容,然后搜索它是否包含所需的文本:“hideme”。 $("li").each(function () { if ($(this).html().indexOf('hideme') > -1) { $(this).hide(); } }); 演示 You can use the html() function to get the html contents of each li and then search i...

从Rails中的HTML元素获取内容(Get content from HTML element in Rails)

您尝试使用的代码(即render :update do |page|等)用于更新HTML页面(例如page['content'].innerHTML = 'Thank you, we received your data.' ),而不是检索来自页面的数据(必须在表单提交中发生)。 选项1)只需使用已提交的表单字段数据。 (你没有包含一个实际的例子,我不知道你是否还有其他非格式内容要保存。)我倾向于通过将params散列转换为JSON字符串并将其保存在数据库中的文本字段。 例如@evaluation...

替代HTML5中的标签?(Alternative to tag in HTML5?)

相同的文档( Mozilla FireFox )声明: 它现在已被<slot>元素取代。 使用<slot>元素。 当某些东西被弃用时,你不应该再使用它了。 ( Mozilla也说明了这一点。)弃用意味着它不再被批准/不批准。 The same documentation (Mozilla FireFox) states: It has now been replaced by the <slot> element. Use the <slot> element. When something is...

如何通过他的内容获取HTML元素?(How to get an HTML element by his content?)

如果您对字符串的任何部分不区分大小写匹配感到满意,则可以使用:contains : $('#nameMachine h3:contains("XX")'); 或者,如果您要求字符串的完全匹配区分大小写,则可以使用filter() : $('#nameMachine h3').filter(function() { return $(this).text().trim() == 'XX'; }) If you're happy with a case insensitive match o...

获取元素的html标记内容(Get element's html tag content)

如果克隆节点,则innerHTML属性将为空。 对于您的示例,浅克隆是合适的(传递false或不传递任何东西)。 // get the div element var element = document.querySelectorAll('div')[0]; // view the outerHTML of the element console.log('original outerHTML', element.outerHTML); // clone the element ...

PHP:如何获取HTML元素的正确结束标记(PHP: how to get the correct closing tag of an HTML element)

您可以使用PHP Simple HTML DOM解析器来解析HTML,如DOMDocument for XML。 注意: PHP也直接支持DOMDocument 。 $scrape_address = "http://www.al-madina.com/node/444862"; $ch = curl_init($scrape_address); curl_setopt ($ch, CURLOPT_RETURNTRANSFER, '1'); curl_setopt...

如何从伪元素内容中插入HTML标记:[复制](How to inserted HTML tag from pseudo-element content: [duplicate])

您不能使用CSS伪元素的content属性注入HTML元素; 但是,您可以将它们设置为display: block和(在您的问题中似乎需要,但不是您演示/尝试过的代码)使用height和background-color来模拟<hr /> : article::before { content: ''; display: block; margin: 1em 0; height: 5px; background-color: #f00; } article:...

使用Selenium获取HTML评论标记的内容(Get content of HTML comment tag with Selenium)

Selenium API不支持注释节点。 但是你可以通过这段JavaScript轻松获得评论: head = driver.find_element_by_css_selector("head") comment = get_element_comment(head) print(comment) def get_element_comment(element): return element._parent.execute_script(""" return Array.p...

相关文章

更多

HTML5 Audio元素【HTML5教程 - 第五篇】

直到目前为止,web页面上没有标准的方式来播放音频文件。目前大多数的音频文件是使用插件来播放。但是,很 ...

HTML 排版标记

HTML 排版标记包括换行、hr(横线)、p(段落)、pre等 示例: &lt;html&gt ...

The content of element type "package" must match "...

在编写后台登陆模块时,将许多默认的设置放在一个名为default的package 里。然后再定义其他 ...

HTML 字体标记

标题标签 &lt;hn&gt; ==&gt; n的取值范围是1~6; 1.1~6从大到小. ...

HTML5 Video元素【HTML5教程 - 第三篇】

现代互联网中,我们大量的使用视频,在HTML5定义中提供了一个统一的方式来展示视频内容。浏览器支持 首 ...

Struts2 Push Tag 引发的问题

按照Struts官网上的CRUD例子,自己实践了一下,结果报错: tag 'push', field ...

HTML meta标签

meta标签 :属性标签 . 网页元标签 &lt;meta http-equiv=&quot;Con ...

在HTML中使用javascript

1&gt;页面中直接在script标签中书写 &lt;html&gt;&lt;head&gt;&lt; ...

HTML转义标签

空格 空格是 HTML 中最普通的字符实体。 通常情况下,HTML 会裁掉文档中的空格。假如你在文档 ...

最新问答

更多

绝地求生、荒野行动、香肠派对 哪个更好玩???(都是吃鸡类游戏)

PC上的绝地求生,是最早也是最火的大逃杀游戏。 荒野行动是网易抄袭蓝洞绝地求生制作的手游。相似度90%,还有他一起出的终结折2,这2款正在被蓝洞告,打官司呢。 手游上的绝地求生有2部都是蓝洞授权(收钱)给腾讯开发的正版ID手游。所以跟PC上做的一模一样,蓝洞也没话说。 加上吃鸡国服也是腾讯独家代理,所以根本没有什么可说的。只要这个类型的 过于相似的,腾讯都可以借蓝洞之手起诉。打压同行是国内BAT最爱干的事嘛! 香肠派对画风虽然不一样,但核心玩法还是跟人家正版的一样的,同样也是没有被授权的。 98

如何在jQuery集合中选择第n个jQuery对象?(How to select the nth jQuery object in a jQuery collection?)

你可以使用eq : var rootElement = $('.grid').find('.box').eq(0); rootElement.find('.a'); /* Use chaining to do more work */ You can use eq: var rootElement = $('.grid').find('.box').eq(0); rootElement.find('.a'); /* Use chaining to do more work */

ASP NET使用jQuery和AJAX上传图像(ASP NET upload image with jQuery and AJAX)

您可以自己手动设置FormData键和值。 Upload 创建FormData并设置新的键/值 $("#btnUpload").on("click", function(e) { e.preventDefault(); var file = $("#imguploader").get(0).file

SQL Server XML查询中包含名称空间的位置(SQL Server XML query with namespaces in the where exist)

您可能希望使用#temp.identXml.query而不是#temp.identXml.query 。 您可以在这里阅读更多相关信息SQL Server XML exists() 我相信你也可以像这样使用它 Select #temp.identXml.value('(/*:PersonIdentity/*:MasterIndexes/*:PersonIndex/*:SourceIndex)[1]','varchar(100)') as Ident ,#temp.identXml.value(

宁夏银川永宁县望远镇哪里有修mp5的?

胜利街有家电维修,电脑城,银川商场多得很…

我想用更新的日期标记所有更新的行(I would like to mark all updated rows with the date that they have been updated)

您可以使用更新后触发的触发器来执行此操作。 给出如下表: create table your_table (id int primary key, val int, last_update datetime) 每当您更新表中的内容时,此触发器将设置last_update值。 CREATE TRIGGER trigger_name ON your_table AFTER UPDATE AS BEGIN UPDATE your_table SET your_ta

郑州会计培训班

招生的,至于时间吗,就看你自己的时间段了,你可以致电0371-63300220.他们会帮你选择一下的。离你最近,最专业的培训班。

如何定位数组中的负数,并得到所有正数的总和?(How to target e negative number from an array, and get the sum of all positive numbers?)

只需创建一个条件来检查它是正数还是负数,然后定义一个空的数组negatives ,如果数字是负数,则将其推到负数组中,如果是正数,则将其添加到sum变量中,请查看下面的工作示例。 function SummPositive( numbers ) { var negatives = []; var sum = 0; for(var i = 0; i < numbers.length; i++) { if(numbers[i] < 0) { negati

在响应图像上叠加网格(Overlay grid on responsive image)

使用两个linear-gradient s,我们可以创建两个简单的线条,然后每隔n%重复一次background-size 。 它看起来像这样: background: linear-gradient(to bottom, #000 2px, transparent 2px), linear-gradient(to right, #000 2px, transparent 2px); background-size: 10%; 两个渐变创建两条相交的线,长度为百分比,如下所示: 使用默认的b

无法让POST在Azure网站上运行(Could not get POST to work on Azure Website)

最后我找到了答案......我不得不删除尾随的斜线! 我使用了“ https://example.com/api/messages/ ”,这将自动产生GET,无论我使用PostAsync还是PostAsJsonAsync。 使用“ https://example.com/api/messages”,GET和POST似乎都运行良好! Finally I've found the answer.... I had to remove the trailing slash! I've used "ht