Searching in html on the behalf of ID

Question

Is searching possible in html tags on the behalf of ID? for example to find div tag having id="abc".

I can use document.getElementByID("abc"). But i need parent div + its inner HTML in return of searching. i.e if this div has childs

Be more specific in your question if you expect a specific answer. Are we to guess what you are using to parse this HTML? — Brad, May 18 '13 at 04:10
Yeah, you've said that. Search with what? Simply repeating yourself doesn't add more context. — Brad, May 18 '13 at 04:12
Ctrl+F in the page source? Not sure what you mean by search. — BoltClock, May 18 '13 at 04:15
I can use document.getElementByID("abc"). But i need HTML in return of searching.And also if this div has childs — bkashaf, May 18 '13 at 04:22
So you want to use JavaScript to get the HTML of an element with that ID? — BoltClock, May 18 '13 at 04:32
Just to clarify: given the element `
Some content
` you want to get that *exact* HTML, using JavaScript? — David Thomas, May 18 '13 at 05:03
Whether you need entire page or out side of the div or inside of the div. — JDGuide, May 18 '13 at 05:09
@DavidThomas Yes i need exact html including div having id="abc",the outermost. — bkashaf, May 18 '13 at 06:04
@JDeveloper that cide is showing inner html and parent div with id="abc" but not showing other attributes ie style attribute of outer div. — bkashaf, May 18 '13 at 06:12

score 2 · Answer 1 · edited May 23 '17 at 11:57

2

Try this :-

<script >
function showHTML(){



   var vinner=document.getElementByID("abc").innerHTML;
   var totalinner="<div >"+vinner+"</div>";
   alert(totalinner);

}
</script>

HTML part:-

<body onload="showHTML();">

<div id="abc">
    Hello inside abc
    <div> 
            Inner div inside abc tag.
    </div>
</div>
</body>

Its working fine. You can get Attributes here.

edited May 23 '17 at 11:57

Community

1
1

answered May 18 '13 at 04:50

JDGuide

6,239
12
46
64

Thanks for response. But this code will skip other attributes of that outermost div, if it has – bkashaf May 18 '13 at 04:58
This will only show all attributes and tags inside the abc div. – JDGuide May 18 '13 at 05:01
1

Just use var vinner=document.getElementById("abc").outerHTML; alert(vinner); It should get you the complete DIV – Arun May 18 '13 at 05:03
You may be right @Arun. But what is expecting- inner or outer. – JDGuide May 18 '13 at 05:04
1

@JDeveloper I think he wants the entire div element whose Id he possesses . So Outer would be appropriate – Arun May 18 '13 at 05:06
Exactly my above posted answer will show all div inside the ID he is looking. – JDGuide May 18 '13 at 05:07
@JDeveloper But this code will not show the attributes of div having id="abc" otherthen id. – bkashaf May 18 '13 at 06:09
And all the *other* attributes and properties that the element might have..? – David Thomas May 18 '13 at 06:27
1

this code gives inner + parent document.getElementById("abc").parentNode.innerHTML; – bkashaf May 18 '13 at 06:36
your answer helped me but solution i need is answer of Igor S 's solution. Upvote for help :) – bkashaf May 18 '13 at 14:43

score 1 · Accepted Answer · answered May 18 '13 at 05:57

It's hard to understand what you want to achieve:

document.getElementById("abc").parentNode.innerHTML; 
//will return <div id="abc"> and other items from parrent

document.getElementById("abc").getAttribute("name");
//will atribute of <div id="abc">

if (document.getElementById("abc").hasChildNodes()) {
    // It has at least one
}

Using jQuery is much simplier, you could do that:

$("#abc").attr('id') //retunrs id
$("#abc").attr('class') //returns classes
//or other manipulations

score 1 · Answer 3 · answered May 18 '13 at 06:24

One way to do this is to use outerHTML, which:

gets the serialized HTML fragment describing the element including its descendants.

Given the following HTML:

<div id="abc" data-attr="A custom data-* attribute">Some text in the div.</div>

The following JavaScript will log, in the console, the HTML of the element of id equal to abc:

var htmlString = document.getElementById('abc').outerHTML;
console.log(htmlString);

JS Fiddle demo.

References:

Searching in html on the behalf of ID

3 Answers3