The problem is when I try to create custom element this way
var el= document.createElement('my-el');
el.setAttribute('tag-model', "[[myBinding]]");
it creates element without its attributes. How to construct custom element with all its attributes and then append to HTML to initilize them?
Thank you!
See this
It basically says to do it like that:
var dynamicEl = document.createElement("my-element");
dynamicEl.setAttribute("id", "my-element-id");
dynamicEl.setAttribute("greeting", "Hello, Good Morning.");
document.body.appendChild(dynamicEl);
However, if you want to change properties directly, it wont work with setAttribute. You have to do it like that:
var dynamicEl = document.createElement("my-element");
dynamicEl.greeting = 'Waaazaaaa???';
document.body.appendChild(dynamicEl);
Related
I'm trying to extract data from a JS function that only renders an element's HTML - and I need the element's ID or class.
Example:
JS Element Value:
x = '<div class="active introjs-showElement introjs-relativePosition" id="myId">Toate (75)</div>';
I need to do get the element's id or class (in this case the id would be myId).
Is there any way to do this? Strip the tags or extract the text via strstr?
Thank you
The easiest thing to do would be to grab the jQuery object of the string you have:
$(x);
Now you have access to all the jQuery extensions on it to allow you to get/set what you need:
$(x).attr('id'); // == 'myId'
NOTE: This is obviously based on the assumption you have jQuery to use. If you don't, then the second part of my answer is - get jQuery, it's designed to make operations like these very easy and tackle compatibility issues where it can too
You may want to take a look at this:
var div = document.createElement('div');
div.innerHTML = '<div class="active introjs-showElement introjs-relativePosition" id="myId">Toate (75)</div>';
console.log(div.firstChild.className);
console.log(div.firstChild.id);
I'm making a little app, which has to append 3 elements to another element, by using this code:
var MyElem1= document.createElement("div");
ParentElem.appendChild(MyElem1);
This works just fine, but i was wondering if there is a way to create a full element, like this for example:
var MyElem1= document.createElement('<div style="some-styling: here;">Some InnerHtml Here</div>');
ParentElem.appendChild(MyElem1);
I know i can add those properties to the element after i create it, but i'm hopping there's a way to do it inline like that (Something that works cross-browser).
I saw on W3Schools (yes i know i should stop using it) the createElement function requires only the element type (div, span, button, etc...).
You could create a dummy container and create all elements you want inside it by replacing its innerHTML property, and then getting the .firstChild.
Here is a reusable function for it
var elementFactory = (function (){
var dummy = document.createElement('div');
return function(outerHtml){
var node;
dummy.innerHTML = outerHtml;
node = dummy.firstChild;
dummy.removeChild(node);
return node;
}
})();
and use it like this
var MyElem1 = elementFactory('<div style="some-styling: here;">Some InnerHtml Here</div>'),
MyElem2 = elementFactory('<div style="some-other-styling: here;">Some Other InnerHtml Here</div>');
Demo at http://jsfiddle.net/5De3p/1/
I was wondering how you could read and save to a variable the CSS value of a HTML element. For example say you have this:
<tr id="presentationProperty" style="display: none;">
I would want to be able to read the display: none property and save it to a variable inside JavaScript. Is this possible and if so, how?
Easy:
var display = document.getElementById('presentationProperty').style.display;
Globally, you can access to styles properties of an element like this:
var getStyle = function(elementID, prop) {
return document.getElementById(''+elementID+'').style[prop];
};
alert (getStyle('presentationProperty', 'display')); // block
alert (getStyle('presentationProperty', 'position'));
alert (getStyle('presentationProperty', 'backgroundColor'));
// ...
First you need to get the element, and then you can use the style property:
var element = document.getElementById("presentationProperty");
var display = element.style.display;
See here for a full list of available style properties
If you want to read the final style applied to an element, use getComputedStyle(). This includes any style applied to the element, whether it is an external stylesheets, styles defined within the same document, element styles or styles applied by JavaScript.
var elem = document.getElementById("presentationProperty");
var theCSSprop = window.getComputedStyle(elem).getPropertyValue("display");
Try this:
var x = document.getElementById('presentationProperty').style.display;
You can use getComputedStyle() to get applied css value on particular element, something like this.
HTML
<tr id="presentationProperty" style="display: none;">
javaScript
var tr= document.getElementById('presentationProperty');
var computedStyle = document.defaultView.getComputedStyle(tr);
var dispVal = computedStyle['display']
This would more usefule when you appied the css(display) as external or internal css.
You can simply do this:
var el = document.getElementById('presentationProperty');
console.log(el.style.display);
It however will return empty string if the element has no display property defined inside css (i.e. it is inheriting default display property).
Try This for getting all properties:
var css = document.getElementById('presentationProperty').style.cssText;
alert(css);
I'd like to get all the document html in a variable and delete DOM elements inside using jQuery.
for exemple, my document is:
<div>aa</div>
<div>bb</div>
I use my javascript, I tried something but it didn't works:
var doc = $('html').html();
var print = $.parseHTML(doc);
print.remove('div:eq(1)');
And I'd like to have:
<div>aa</div>
In print without removing it from the document
http://jsfiddle.net/VnGeE/2/
You can use clone()
var doc = $('html').clone();
doc.find('div:eq(1)').remove();
alert(doc.html());
My a-tag (link) contains innerHTML which is an image like this:
.innerHTML = <img alt="hello world" src="/Content/Images/test.png">
How can I get the text of the alt attribute with JQuery?
You really don't need jQuery. If you have the a element you can do this:
// lets call the anchor tag `link`
var alt = link.getElementsByTagName('img')[0].alt; // assuming a single image tag
Remember attributes map to properties (most), and unless the property is changed, or the attribute, the two should reflect the same data (there are edge cases to this, but they can be handled case-by-case).
If you truly do need the attribute there is
var alt = link.getElementsByTagName('img')[0].getAttribute('alt');
Last scenario is if you only have the image tag as a string.
var str = '<img alt="hello world" src="/Content/Images/test.png">';
var tmp = document.createElement('div');
tmp.innerHTML = str;
var alt = tmp.getElementsByTagName('img')[0].alt;
If you must use jQuery (or just prefer it) then the other answer provided by Alexander and Ashivard will work.
Note: My answer was provided for completeness and more options. I realize the OP asked for jQuery solution and not native js.
Being $a your <a/> element.
Using jQuery you can do:
$("img", $a).first().attr("alt");
Or, using pure JavaScript:
var $img = $a.getElementsByTagName("img")[0];
console.log($img.alt);
See it here.
use this.
var altName=$('a img').attr('alt');