Get full opening tag using jQuery

Question

Say HTML:

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

How to get the entire open tag and its attributes (but not the closing tag) as it shows in HTML using an identifier? For example:

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

Then will return:

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

Answer 1

You can always use the DOM element attribute outerHTML

 $(selector)[0].outerHTML 

which just gets the first DOM element to select, and then acquires html using the outerHTML DOM attribute

EDIT If you do not want the content, but only a tag for posting, you could do it

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

or if you want to just start the tag

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

you can use it this way to get the attached tag

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

or like this to get the start tag

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

Answer 2

You can define a jQuery method that returns the outerHTML property.

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

http://jsfiddle.net/w2FAb/

To remove an end tag:

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

An array is returned for several selected items:

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

Answer 3

Using simple simple JavaScript manipulation with JavaScript. Find the first sliding corner, then take everything to this point.

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

Example

 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: <p id="testSubject"> 

 <p id="testSubject"> <strong>Ignore</strong> this content. </p> 

For JS Fiddle: https://jsfiddle.net/luisperezphd/owj7w1hu/

Answer 4

You can do it as follows: Example

First you get the contained element, and then you get the html text of that element. Then you split the text into > and you get the text you want.

This will only work if there are no elements inside the containing element before the page content. To solve this problem, you can wrap the page div with a simple element (div?), And it will work.

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

See here: How to convert a jQuery object to a string?

You need to take your element, clone it, put it in a DIV, and then capture the HTML file of the specified div.

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

If you do not want any children or content, then wipe the content first after cloning it:

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

Answer 6

Just do it based on @Rune's answer:

 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

If you say you don't want it wrapped in jQuery, you can always just use:

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

Alternatively, you can use jQuery and use:

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

$("page") returns an array, .get(0) returns the 1st element of this array