This question already has answers here:
Get value of a custom attribute
(3 answers)
Closed 4 years ago.
I am trying to find the value of an element inside a div. Not the actual text of the element, but the value tag.
<div id="div">
<p value="1">Example Text</p>
</div>
I mean find the '1' of the p, not the "Example Text". Is there a way to do this, preferably without libraries? Also, I need to be able to do this without knowing the ID of the p.
You can use document.querySelectorAll('#div > *') to get all the elements inside that div, and iterate over each of them and print their text using .innerHTML
var a=document.querySelectorAll('#div > *')
a.forEach((e)=>console.log(e.innerHTML))
<div id="div">
<p id="p" value="1">Example Text</p>
</div>
Related
This question already has answers here:
Jquery - Remove only text content from a div
(6 answers)
Closed 4 years ago.
I have
<div class="col-xs-12">
Congratulations! Here is your submitted post.
<p class="post-details">Lorem ipsum</p>
</div>
How can i remove Congratulations! Here is your submitted post. ?
I tried few things like:
$(".post-details").each(function(){
var text = $(".post-details").prev().text().remove();
console.log(text);
});
But it doesn't catch that text.
Also tried this answer but it doesn't work https://stackoverflow.com/a/1571096/1018804
Check this:
https://stackoverflow.com/a/17852238/5089697
It filters the content inside any element and find the correct node you want to remove (in your case the text which is not wrapped in any element but it is a child to the div). Try it.
You could put the text you want to delete inside a div element with an id and remove that div.
Like this:
<div class="col-xs-12">
<div id=“textToRemove”>Congratulations! Here is your submitted post.</div>
<p class="post-details">Lorem ipsum</p>
</div>
Then remove the div with jquery like so:
$("#textToRemove").remove();
here are what you want.
function Delete(){
$('#con').text('');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-xs-12">
<p id='con'>
Congratulations! Here is your submitted post.
</p>
<p class post-details>Lorem ipsum</p>
</div>
<button onclick='Delete()'>Delete</button>
This question already has answers here:
How do I change the text of a span element using JavaScript?
(18 answers)
Closed 5 years ago.
I want to know what javascript code I can use to edit the text of this word?
This is not a duplicate because this has multiple divs in a div. And the target word is located in a div that is inside the more divs.
<div id="jump">
<div class="kick">
<div class="meet">
<div class="balls">
<div class="word">
Hello
</div>
</div>
</div>
It's the 1st element that has this class...
document.getElementsByClassName('word')[0].innerHTML='Goodbye';
It's the 5th element that has this tag...
document.getElementsByTagName('div')[4].innerHTML='Goodbye';
You can use next code:
document.querySelector('.word').textContent = 'Hello World!';
<div id="jump">
<div class="kick">
<div class="meet">
<div class="balls">
<div class="word">
Hello
</div>
</div>
</div>
But if you has few elements with class word, function 'querySelectror fining only first element'.If you need get many elements, you can use document.querySelectorAll --- is HTMLCollection (not array).
I don't recommend to use getElementByClassName - is very slowly method.
Method getElementsByTagName -faster that querySelectorAll , but it use only tagName. getElementById -is the fastest menthod finding of elements.
But that method find only first element with current ID.
This question already has an answer here:
Dynamically assign ID
(1 answer)
Closed 6 years ago.
Lets say I have some html like this:
<p class="paragraph">Some paragraph text</p>
<p class="dummy">Some dummy text</p>
<p class="paragraph">Some more paragraph text</p>
How could I add IDs only to <p> tags with paragraph class using JS or jQuery?
So that the result would look like this
<p class="paragraph" id="paragraph">Some paragraph text</p>
<p class="dummy">Some dummy text</p>
<p class="paragraph" id="paragraph">Some more paragraph text</p>
for the browser?
I know each ID should ne unique but in my particular case it doesn't matter.
DIVs should have unique IDs to have valid syntax. While the page will load correctly with duplicate IDs, you will run into issue when referencing an element by that duplicate ID.
There should never be an instance where you would need to do this. They question is really what you're trying to accomplish by giving them uniqe IDs, as there is likely a better way. For example, changing display for each class:
$('.paragraph').css('display', 'none');
If you really want to give them IDs, what you should do is generate them uniquely with code similar to the following:
$('.paragraph').each(function(i) {
$(this).prop('id', 'paragraph' + i);
});
You can then call a specific paragraph with $('#paragraph2').
Hope this helps!
This question already has answers here:
<h1>, <h2>, <h3>... tags, inline within paragraphs (<p>)
(6 answers)
Closed 6 years ago.
If i have a p element
<p> simple text <h3> this is h3 text </h3> </p>
And i do this.
alert($('p').html());
It should give output simple text <h3> this is h3 text</h3>
But it alerts only simple text. I thought Ok may be .html() does not output html tags
But when i add any html using jquery in same p element , And then alert in same way it gives me result which is expected(it shows html tags as well) .
This is example
https://jsfiddle.net/04f1drby/
Can someone explain why this different behaviour ? Thanks in advance
If you go into chrome inspector for the JS fiddle page you linked you'll notice the HTML gets rendered as this:
<p id="firstp">
simple text</p><h3>
this is h3 text
</h3>
<p></p>
A closing paragraph tag is added just before your starting header tag.
This question already has answers here:
Why does some of my text within html paragraph tag fall outside of the <p></p>when in browser
(3 answers)
Closed 7 years ago.
I was just testing something and noticed that text inside pre tag does not appear if you access it using parent element.
Following is the code example:
JSFiddle
(function() {
var _innerText = document.getElementById("content").innerText;
var _innerHTML = document.getElementById("content").innerHTML;
var _textContent = document.getElementById("content").textContent;
console.log(_innerText, _innerHTML, _textContent)
console.log($("#content").text());
})()
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<p id="content">
p text
<pre>Pre text</pre>
<small>small text</small>
</p>
I also noticed that anything after it is also not fetched. If you move small before pre, text appears. What could be the reason for it?
You cannot nest block-level elements, such as <pre>, inside <p> in HTML. Your code block rendered as following in browser.
<p id="content"> p text </p>
<pre>Pre text</pre>
<small>small text</small>
<p></p>
You can use div instead of p.
Because you can't put "pre" in "p" tag, try "div":
<div id="content">
p text
<pre>Pre text</pre>
<small>small text</small>
</div>