This w3schools page mentions the HTML DOM createElement() Method. For example, you can create a button by
var btn=document.createElement("BUTTON");
However, how can I add ID/class to this button? And what else can I do with it?
One way with Javascript, is by using setAttribute:
element.setAttribute(name, value);
Example:
var btn=document.createElement("BUTTON");
btn.setAttribute("id", "btn_id");
btn.setAttribute("class", "btn_class");
btn.setAttribute("width", "250px");
btn.setAttribute("data-comma-delimited-array", "one,two,three,four");
btn.setAttribute("anything-random", document.getElementsByTagName("img").length);
The advantage of this way is that you can assign arbitrary values to arbitrary names.
https://developer.mozilla.org/en-US/docs/Web/API/element.setAttribute
You could assign to its property:
var btn=document.createElement("BUTTON");
btn.id = 'btn_id';
btn.className = 'btn_class';
Related
I'm looping through a table in the form of table.rows.length and inside it rows.cells.length and when a certain cell meets a certain criteria then I would like to set an attribute to that html of that cell.
I know you can change the innerHTMl like
var x = document.getElementById("myTable").rows[0].cells;
x[0].innerHTML = "NEW CONTENT";
so I thought the attr would be like
x[0].attr = ('name', 'value');
But no such luck.
could someone please point me to the right direction?
If there are any resources you can recommend that give a full list of all the options you can add to a cell this way that would be great!
Since you're operating with HTML nodes directly - you're dealing with HTMLElement objects that are, in their turn, inherited from generic Element.
As you can see from documentation - you can reach attributes through Element.attributes map, each of them are Attr object with name and value properties.
So correct way will be to use:
x[0].setAttribute('name', 'value');
Working with jQuery and es6 syntax you could use the map function:
var xtr = $('#mytable tr');
xtr.map(itr => {
xtd = $(itr).children('td');
xtd.map(itd => {
$(itd).attr('key', 'value');
});
});
If thats confusing you can work with the for loop the old way:
var xtr = $('#mytable tr');
for(i in xtr){
xtd = $(xtr[i]).children('td');
for(j in xtd){
$(xtd[j]).attr('key', 'value');
}
}
Point being when using jQuery what you do is:
$('element').attr('key', 'value');
I am trying to add a custom element into a editable div using document.execCommand detailed at https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand.
But when I try to add a custom polymer element using the execCommand, browser is unable to recognize the custom element even if it was already imported into scope.
var video-id='FnoL3d33U8o'//a youtube video Id
var html = '<p><div><custom-video-element width="454" height="280" video-id="'+videoUrl+'"></custom-video-element></div></p>';
document.execCommand('insertHTML', false, html);
But this doesn't help and the custom-video-element is not recognized by the browser. Please help if there is any alternate ways or if I am running after a mirage!
if you know what element you need to append, then you can use document.createElement.
There are multiple options how to achiev that, but In your case:
var p = document.createElement("p");
var div = document.createElement("div");
var custom = document.createElement("custom-video-element")
custom.setAttribute("video-id", videoUrl);
.. setting another attributes ..
div.appendChild(custom);
p.appendChild(div);
document.appendChild(p);
and that is it. This should work well.
Of course there might be better and easier solutions but in your case this isn't so bad.
if you create bigger html structure inside your JS, you will do something like:
var div = document.createElement("div");
var inner = "<div class="test"><div></div><p class="p"></p></div>;
div.innerHTML = inner;
div.querySelector(".p").appendChild(document.createElement("custom-video-element"));
In my program, there are some links that will be created at run-time. They will contain the name of users which are selected from table. There is no id or name attribute set on these links.
How can I get the name of user corresponding to each link when I click on them?
You can do this using jQuery like so:
$('a').click(function(){
var user_name = $(this).text();
});
You can get a variable that points to the calling element in just plain Javascript like this.
Javascript:
function myFunction(link)
{
alert(link.innerText);
return false;
}
Html:
Bob
You can get the HTML element using 3 different functions which are:
document.getElementById(id);
document.getElementsByTagName(tagName);
document.getElementsByName(name);
use any of the following..
var links = document.getElementsByTagName("a");
for(var i=0;i<links.length;i++)
{
var value = links[i].value;
}
Could you use the nth-child selector? It selects an instance of a link based on the order it appears in the document, without using an ID or Class.
a:nth-child(2) {
}
http://css-tricks.com/how-nth-child-works/
This code from Dart worries me:
bool get isTemplate => tagName == 'TEMPLATE' || _isAttributeTemplate;
void _ensureTemplate() {
if (!isTemplate) {
throw new UnsupportedError('$this is not a template.');
}
...
Does this mean that the only way I can modify my document is to make it html5?
What if I want to modify an html4 document and set innerHtml in a div, how do I achieve this?
I am assuming you are asking about the code in dart:html Element?
The method you are referring to is only called by the library itself, and only in methods where isTemplate has to be true, for example this one. If you follow this link, you can also read what other fields/methods work like this.
innerHtml is a field in every subclass of Element which supports it, for example DivElement
Example:
DivElement myDiv1 = new DivElement();
myDiv1.innerHtml = "<p>I am a DIV!</p>";
query("#some_div_id").innerHtml = "<p>Hey, me too!</p>";
I have 5 a elements that I need to inject with additional span , instead of creating new Element 5 times how can I do this only once ? I tried
var holders= $$('.holders');
holders.each(function (el){
var addspan = new Element('span', {
'class': 'over'
});
el.inject(addspan , 'top');
});
but it does not work
any help is appreciated , thank you!
Injection works the other way around; it injects an element into another one. Try reversing addspan and el.
Another option would be to use the adopt function, which might be more intuitively meant to have an element adopt another one.
Like akaIDIOT already mentioned, you have to swap addspan and el when using the inject method. To save a line of code, you can chain the inject method with the new element like this:
var holders= $$('.holders');
holders.each(function(el) {
var addspan = new Element('span', {
'class': 'over'
}).inject(el, 'top');
});