Question

我们说HTML是：

<div id="page" class="someclass"> more divs </div>

如何使用ID在HTML中显示整个开始标记及其属性（但不是结束标记）？例如：

$('#page').tag();

然后返回：

<div id="page" class="someclass">

Answer 1

您始终可以使用DOM元素属性outerHTML

$(selector)[0].outerHTML

它只是获取选择的第一个DOM元素，然后使用DOM属性outerHTML获取html

编辑如果您不想要内容而只需要封闭标记，则可以执行此操作

$.fn.tag = function(){
    return this[0].outerHTML.replace(this.html(),"");
};

或者如果您只想要开始标记

$.fn.startTag = function(){
    return this[0].outerHTML.split(this.html())[0];
};

然后您可以像这样使用它来获取封闭标记

$("#page").tag();

或者像这样得到开始标记

$("#page").startTag();

Answer 2

您可以定义一个返回outerHTML属性的jQuery方法。

$.fn.tag = function() {
   return this.first().clone().empty().prop('outerHTML');
}

$('#page').tag();

http://jsfiddle.net/w2FAb/

删除结束标记：

$.fn.tag = function() {
   var r = this[0].nodeName.toLowerCase();
   return this.first()
              .clone()
              .empty()
              .prop('outerHTML')
              .replace('</'+r+'>', '');
}

对于多个选定元素，以下内容返回一个数组：

$.fn.tag = function() {
   return this.map(function() {
      var r = this.nodeName.toLowerCase();
      return $(this).clone()
                    .empty()
                    .prop('outerHTML')
                    .replace('</'+r+'>', '');
   }).get();
}

Answer 3

使用普通的旧JavaScript简单字符串操作。找到第一个闭合角括号，然后将所有内容都放到那一点。

function getElementStartTag(element) {
    var html = element.outerHTML;
    var index = html.indexOf(">");
    var startTag = html.substring(0, index + 1);
    return startTag;
}

示例

＆＃13;
＆＃13;
function getElementStartTag(element) { var html = element.outerHTML; var index = html.indexOf(">"); var startTag = html.substring(0, index + 1); return startTag; } var element = document.getElementById("testSubject"); var startTag = getElementStartTag(element); alert(startTag); // output: 
＆＃13;
 Ignore this content. 
＆＃13;
＆＃13;
＆＃13;

对于JS Fiddle：Big-O misconceptions

Answer 4

你可以这样做：Example

首先，获取包含元素，然后获取此元素的html文本。然后，您按>拆分文本，然后获得所需的文本。

只有在page div之前的contains元素中没有元素时，这才有效。要解决这个问题，你可以使用一个简单的元素（div？）包装page div，它会起作用。

<强> JQuery的：

$(function(){
    var elem = $("#page").parent().html();
    var arr = elem.split('>');
    $("#result").text(arr[0] + " >");
});

<强> HTML：

<div id="cont">
    <div id="page" class="someclass"> more divs </div>
</div>
<br />

Result: <br />
<div id="result">
</div>

Answer 5

见这里：How do you convert a jQuery object into a string?

您需要获取元素，克隆它，将其放入DIV，然后获取所述div的HTML。

alert( $('<div>').append($('#page').clone()).remove().html() )

如果您不想要任何子元素或内容，请在克隆后首先清除内容：

alert( $('<div>').append($('#page').clone().html('')).remove().html() )

Answer 6

基于@Rune回答：

var outer = $("#page")[0].outerHTML;
var inner = $("#page")[0].innerHTML;
var result = outer.replace(inner,"");
console.log(result)

Answer 7

   

 $.fn.startTag = function () {
      // this would act as backup
      var currInnerHtml = this.html();
      // you will need to have some unique string as inner html in order to split using that as in some cases innerHtml might be empty or might have some common ones that would hinder with proper splitting
      var uniqueString = performance.now();
      this.html(uniqueString);
      const startTag = this[0].outerHTML.split(uniqueString )[0];
      this.html(currInnerHtml);
      return startTag;
    };

Answer 8

如果你说你不想用jQuery包装它，你可以随时使用：

var ele = document.getElementById('page');

或者你可以继续使用jQuery并使用：

var ele = $("page").get(0);

$("page")返回一个数组，.get(0)返回该数组的第一个元素

使用jQuery获取整个开始标记

8 个答案: