无子元素的Javascript元素html

在我的javascript代码中，我需要得到元素的定义，但是没有它的内容——既没有文本也没有子元素

例如：

<div id="my_example_id" class="ShinyClass">
   My important text
   <span> Here</span>
</div>

我的重要文本
在这里

我想编写一个javascript函数，当与上面div的元素一起提供时，它将返回以下字符串：

<div id="my_example_id" class="ShinyClass">

我一直在尝试对元素进行不同的操作，如

innerHTML

、

outerHTML

等函数，但我无法找出如何只提取我感兴趣的部分。直到第一个

>

的子字符串是最好的解决方案吗

编辑：选择元素不是问题的一部分-我知道怎么做，没问题。相反，问题是：当我已经选择了一个特定的元素时，如何只解析为字符串它自己的定义。

更新：

const div = document.getElementById('my_example_id'); // get the node
const html = div.outerHTML.replace(div.innerHTML || '', ''); // simple set logic

console.log(html);

只是想办法做到这一点，而不是说最好的

const div = document.getElementById('my_example_id');
const copy = div.cloneNode(true);
const parent = document.createElement('div');
copy.innerHTML = '';
parent.appendChild(copy); // I forgot to add this line.
const html = parent.innerHTML;

console.log(html);

---

基本上，创建div的副本，创建父节点，然后删除复制节点的innerHTML，只保留“div”本身。将复制的节点附加到新的父节点，并显示父节点的innerHTML，这正是您想要的“div”。

您不需要做所有那些花哨的事情，将其复制到父节点

// make a copy of the element
var clone = document.getElementById('my_example_id').cloneNode(true);
// empty all the contents of the copy
clone.innerHTML = "";
// get the outer html of the copy
var definition = clone.outerHTML;

console.log(definition);

---

我把它放在这个小提琴的一个函数中：

我想正则表达式就是你所需要的。检查这是否适合你

function getHtml(selector) {
  var element = document.querySelector(selector)
  var htmlText = element.outerHTML
  var start  = htmlText.search(/</)
  var end  = htmlText.search(/>/)
  return htmlText.substr(start, end + 1)
}
alert(getHtml('.ShinyClass'))

函数getHtml（选择器）{ var元素=document.querySelector（选择器） var htmlText=element.outerHTML var start=htmlText.search（/） 返回htmlText.substr（开始、结束+1） } 警报（getHtml（'.ShinyClass'）） 示例

console.log（getElementTag（“我的示例id”）；
函数getElementTag（myElementId）{
var FullEelementObject=document.getElementById（myElementId）；
var FullElementText=FullEelementObject.outerHTML；
var regExTag=新的RegExp（/（）/i）；
openingTag=FullElementText.match（regExTag）；
返回openingTag[0]；
}

把这个JSFiddle放在一起，它得到传递函数的元素的outerHTML，得到完整的开始标记的regExp

---

编辑：

添加您尝试过的代码。@Tushar感谢您的建设性反馈-我添加了更多的想法，而不是代码本身，只是因为我不知道如何开始that@janje否-这也会将克隆的所有子内容set

innerHTML

返回为空字符串。在您编写的内容中，父级

与副本
之间的关系是什么？我漏了一行，更新了我的答案。用两行代码更新了我的答案，我想不出更好的办法了。没有节点克隆，没有新的父节点，只需一次简单的
替换
。感谢您的努力-您已经获得了他们的支持。不过我还是更喜欢专注于“>”的解决方案，因为它们会更有效，特别是对于重dom，我想我相信这不会修改dom，对吗？@BorisStrandjev-正确。@Azamantes-谢谢你，如果你使用
.cloneNode（false）
或者只使用
.cloneNode（）
（默认值为false）就很好了），您将获得该元素的克隆，而不包含任何子元素。您不必手动清空innerHTML。感谢您的建议-目前，在看到其他人的建议后，我认为这更为理想，我很高兴它有帮助：）无需在问题上添加评论，说您添加了答案。。。我们可以看到答案。另外，OP会得到答案的通知。
console.log(getElementTag("my_example_id"));

function getElementTag(myElementId) {
  var FullEelementObject = document.getElementById(myElementId);
  var FullElementText = FullEelementObject.outerHTML;
  var regExTag = new RegExp(/(<).*(>)/i);

  openingTag = FullElementText.match(regExTag);

  return openingTag[0];
}