how to get the id within the function on the fly?

Question

The following code works fine:

function createElement(element) {
  var id = $(element).attr('id');//and do your stuff with the id
}
createElement('<div id="abc">Some content</div>');

But I wanted to with pure javascript like this:

function createElement(element) {
  var id = this.id;//returns undefined
  console.log(id);
}
createElement('<div id="abc">Some content</div>');

I also tried element.id but still results in undefined. So How can I get the id abc with pure javascript?

I also tried like this:

function createElement(element) {
  var htmlObject = document.createElement('div');
    htmlObject.innerHTML = element;
    var id = htmlObject.id;//and do your stuff with the id
    console.log(id);
}
createElement('<div id="abc">Some content</div>');

But returning (an empty string)

Why are you using `this`? `this` has nothing to do with `element`. — user2357112, Apr 01 '14 at 04:53
It's usually best to stick to what jQuery has to offer unless you have a very compelling reason to side-step it. I don't know what you mean by "pure JavaScript", except to say "JavaScript without extensions". — tadman, Apr 01 '14 at 04:55
@MichaelTodd: `element` is just a string. You need to parse the HTML first. — user2357112, Apr 01 '14 at 04:56
@mpm name of the DOM element (the real `createElement` I meant :)) — ZenMaster, Apr 01 '14 at 04:57
Since the arg is a string, why dont you string replace the id? — Eddie, Apr 01 '14 at 04:57
Has nothing to do with JavaScript. You have to use DOM API equivalent of `$(element)` — ZenMaster, Apr 01 '14 at 04:58
@mpm: Certainly looks like it, judging by the provided example call, but sometimes people fail to represent their questions accurately. — user2357112, Apr 01 '14 at 04:59
Why do you need to achieve this using pure JS only? jQuery is still JS anyway. — witherwind, Apr 01 '14 at 05:10
By the way, jQuery IS pure JS ,people often mix DOM and javascript.But jQuery is written in javascript,off course. — mpm, Apr 01 '14 at 05:12

adeneo · Answer 1 · 2014-04-01T05:19:43.900

For newer browsers jQuery will use the DOMParser internally, and do something like this

function createElement(element) {
    var doc  = new DOMParser().parseFromString(element, "text/html");
    var elem = doc.body.firstChild;
    console.log(elem.id)
}

FIDDLE

This is the preferred way of doing this, using the built in parser, but it's not supported in IE8 and below, there you'd probably have to use innerHTML etc. so you'll have to add a fallback for DOMParser if old browsers are an issue.

score 1 · Accepted Answer · answered Apr 01 '14 at 05:12

You were almost there:

function createElement(element) 
{
    var div = document.createElement('div');
    div.innerHTML = element;

    var id = div.firstChild.id; // use firstChild
    console.log(id);
}
createElement('<div id="abc">Some content</div>');

Demo

how to get the id within the function on the fly?

2 Answers2