I'm trying to learn and understand javascript.
what is wrong with the following code?
var d=[];
d[0]=document.createElement('div');
d[0].title=document.createElement('div');
d[0].appendChild(d[0].title);
I get this error:
TypeError: Argument 1 of Node.appendChild is not an object.
Can you suggest a solution?
This line d[0].appendChild(d[0].title); is expecting an element to be appended to the div. Your simply appending a text node. Create another div (or whatever element you want) and append that.
The problem is that the name title is reserved. Try a different name.
.title is an attribute of the element, which is a string. When you try to append something to that attribute it is expecting a string.
Related
I am completely a beginner in java script. As i know, by using this line of code:
document.getElementById('ID').value
It looks in the entire PHP file to find the value of that id (it's a text input). Is there any alternative for the documents on that line of code that let me to search only in a class?
for example i have a class called number, so :
this.block = $("#number");
can i use something like that:
this.block.getElementById('ID').value;
Or there is any another line of code that give me the value of a text input? Thanks a lot
You can use
$("#number").find("#id")
to search descendants of #number.
But if your class is number you should use $(".number") instead since that is the class selector.
Suppose I got an element from jquery selector and stored in a variable and now I want to add some custom element to that variable before doing some DOM operation on that variable.
For example if I do this:
var placeHolder = $('.class-name').children().eq(0).clone();
I get an array like this if the children is an input tag:
[input#link, prevObject: r.fn.init(1)]
I think above represent selected input tag and now I want to append another tag like:
placeHolder = placeHolder + '<span class="delete-btn">X</span>';
And now I would like to add this placeHolder back to the DOM. But when I do this like $('.some-class').append(placeHolder); its throwing error in console.
Here is the error:
jquery-3.2.1.slim.min.js:2 Uncaught Error: Syntax error, unrecognized
expression: [object Object]<span class="delete-btn">X</span>
The weird thing is it's adding placeHolder to the DOM but in [object Object] format. So How to add those elements got from jquery selector and some custom tag(like 3rd highlighted line) and then add back to DOM?
By adding the span to the placeholder, you convert it to a string. Do not try to concatenate the html, just append your objects like
$('.some-class')
.append(placeHolder)
.append('<span class="delete-btn">X</span>');
You're concatenating placeholder (a jQuery object) and a string (your span) and passing them to jQuery which is then treating the whole thing as a string.
Use .get(0) and this should fix your issue:
var placeHolder = $('.class-name').children().eq(0).clone().get(0);
I am simply trying to extract the text without any of the elements from a DOM node with
var textIWant = $('.classname').contents().filter(function(){
return this.nodeType === 3;
})[1];
This returns to me what looks like a string in the console, something untrimmed like..
" text I want "
so when I go to trim the text, with something like
$.trim(textIWant)
I get
"[object Text]"
also as you would expect,
typeof textIWant
returns "object"
Why is this string looking object not a string, and how can I get the string I need? I cannot use methods such as String() or toString() it will just convert it to the same "[object Text]" that I put above.
**EDIT
I also want to add that I am working with a proxy server, so I do not have direct access the the original HTML written, otherwise, the common sense solution would be to wrap the text in an HTML tag and query for it using jQuery's .text(). My question comes from an edge case scenario not unfamiliarity with jQuery :).
** Answer
Something like this seemed to do the trick
$.trim($($('.classname').contents().filter(function(){
return this.nodeType === 3;
})[1]).text())
thank you.
You have a TextNode object so need to read it thusly:
var text = $(textIWant).text();
Or natively
var text = textIWant.nodeValue;
I see no reason in your question for why you need to deal with text nodes directly yourself at all. jQuery will fetch text for you.
If you only have a single object that matches .classname then the simpler way to get the text from that element is with:
var textIWant = $.trim($(".classname").text());
This will collect the text from all textnodes that are within the .classname element. There is no need for you to filter through them yourself.
If you may have more than one element that matches .classname and you only want the text from the first one, then you can use this:
var textIWant = $.trim($(".classname").eq(0).text());
In the future, if you do have a textNode DOM element and you wish to retrieve the text from it, you can use node.nodeValue to get the text from a textNode.
As to your other questions:
Why is this string looking object not a string, and how can I get the
string I need?
You were retrieving the text node DOM object, not the text from the node. You can use node.nodeValue to get the actual text from the text node and then you will have a string that you can operate on as a string.
I cannot use methods such as String() or toString() it will just
convert it to the same "[object Text]" that I put above.
This is because you had a text node, not a string. You just have to get the text out of the node so you can then use it as a string.
Use .toString() in your code before assigning that to "textIWant" variable or you can convert it to string by this function:
http://www.w3schools.com/jsref/jsref_string.asp
Note: If your object is a DOM element you may use "text" function from jquery:
http://api.jquery.com/text/
textIWant is a Text node. Therefore when you throw it into the $.trim it will try to run it on an object.
You would want to ask for the textContent of the TextNode
like so.
$.trim(textIWant.textContent); //Does not work in IE8 or below
or like Alex K. suggested use jQuery to get the text from the node using .text()
$.trim($(textIWant).text);
http://jsbin.com/welidanihe/edit?html,js,console
I am trying to add a string variable as a child of a node. The code that I'm using looks like this
$(this).parentNode.parentNode.insertBefore('content',$(this).parentNode)
I believe that this is correct syntax, but I keep receiving NOT_FOUND_ERR: DOM Exception 8. Does anyone have any pointers?
parentElement.insertBefore(el, beforeWhat);
if you want to insert a new element BEFORE a node
if you want to append a new textNode to the element you rather need
var textNode = document.createTextNode("content");
el.appendChild(textNode);
but what really bothers me is that you seem to using jQuery or some framework, and use DOM methods on them. Because that won't work.
You need to use their own methods then, like:
$(this).append("content");
I'm trying to get the innerHTML value of a node. The value is D&O. When I try to get this value using innerHTML I'm getting D &[semicolon] O. Is there any option to get the exact value rather than encoded value using Javascript? Please help me.
Forum prevents me from entering semicolon after &
You can use
return ("innerText" in node) ? node.innerText : node.textContent;
innerHTML will returns the equivalent HTML that would provide the text that you see.
element.firstChild.data;
Get the data in the text node contained in the element. If you want the text and not HTML that represents it, don't use innerHTML.