I have a small problem that i cannot solve.I have this : <p>Text<span></span></p> and i want to change only the text of the <p>.Which means, when i click on an change-Button, the text based on an input field should replace the text.
What i have tried is something like this : $("p").text("newText") but this will also remove the <span>.
So how can i only change the text and not the inner html...
With your HTML above you can do
$('p').contents().first()[0].textContent='newText';
The idea is to take advantage of the fact that contents() includes text-nodes. Then, access by index [0] to get the native javascript DOM element and set the textContent
$('p').contents().first()[0].textContent = 'newText';
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<p>Text<span>inside span</span>
</p>
Put another span inside of the p tag and only change its contents:
<p>
<span id="theText">Text</span>
<span></span>
</p>
And then:
$('#theText').text('newText');
$('#theText').text('newText')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
<span id="theText"></span>
<span>some other span</span>
</p>
Related
HTML:
<div id='verse'>
<p id='text'>
<span id = 'reference'>random stuff here</span>
random stuff here
</p>
</div>
JS:
class Verse {
...
update() {
document.getElementById('text').innerHTML = 'text';
document.getElementById('reference').innerHTML = 'reference';
}
...
}
Whenever I call .update in an instance of Verse, the paragraph element's text changes without a problem but trying to change the span's text gives me an error: TypeError: Cannot set properties of null. Does not work with innerText either. It works fine if I change it outside of the class. Thanks for the help!
Setting innerHTML on #text replaces the contents of the <p> entirely, so when you subsequently try to access #reference it no longer exists.
The simplest way to avoid this would be to add another span and replace its text instead of the entire <p>.
<div id='verse'>
<p>
<span id='reference'>random stuff here</span>
<span id='text'>random stuff here</span>
</p>
</div>
I want to count the total element and text inside the p tag
<p class="parent">
<span class="child">Span Text</span>
Text Text Text
</p>
it is possible?
$(p).children(').length
I'm using this code and this giving me 1 only but I want count 2.
You are looking for child nodes, and not children (read more about the difference here).
However, note that the actual number of child nodes in your HTML code would be 3, since there's a text node that holds the spaces before the span.
In this example, you can see the count of child nodes with or without the space before the span.
const parent1ChildNodes = document.querySelector('.parent1').childNodes.length
const parent2ChildNodes = document.querySelector('.parent2').childNodes.length
console.log(parent1ChildNodes)
console.log(parent2ChildNodes)
<p class="parent1">
<span class="child">Span Text</span>
Text Text Text
</p>
<p class="parent2"><span class="child">Span Text</span>
Text Text Text
</p>
children method only returns valid objects. "Text Text Text" is not an html object. Therefore it doesn't count. If you place it in another span, the length of the children becomes 2.
<p class="parent">
<span class="child">Span Text</span>
<span>Text Text Text</span>
</p>
You need to use contents instead of children to get text nodes counted. Note that contents will also count comment nodes.
$(p).contents().length
Have HTML of the following form:
<h1 class="someClass"> Want this <span class="anotherClass"> don't want this </span> </h1>
How do I use js or jquery (preferred) to grab the "Want this" text, excluding the span text?
You may do that in plain JS. Just extract the contents of the first child node of the h1.
console.log(
document.querySelector('h1').childNodes[0].nodeValue.trim()
);
<h1 class="someClass">
Want this
<span class="anotherClass">don't want this</span>
</h1>
This did it:
$('.someClass').contents().get(0).nodeValue.trim();
When you press button it calls randomQuote() function using onClick method in html. It works fine , changes the background color and the text of quotes[rand] also works. But there is no change in by id element. Also, it is not a array problem because if i type the same by statement outside the randomQuote(), it works fine.
Here is the code:
function randomQuote(){
var rand =Math.floor(Math.random()*(quotes.length));
$("#qu").html(quotes[rand]);
$("#by").html(by[rand]);
$("body").animate({backgroundColor: colorr[rand]}, 1000);
};
(Go to https://codepen.io/TheCoder21/pen/XVVxvo) for full code
The issue in your markup:
<div class="quote">
<blockquote id="qu">
Here are some of my favourite quotes.Hope you enjoy them!
<p id="by">
random text
</p>
</blockquote>
</div>
container with id="by" overwrites by this jquery method $("#qu").html(quotes[rand]);
If you want to prevent this behaviour just wrap your text in new paragraph with id="qu":
<blockquote>
<p id="by">
Here are some of my favourite quotes.Hope you enjoy them!
</p>
<p id="by">
random text
</p>
</blockquote>
The problem is that your by element belongs inside blockguote i.e id=qu element when you did $("#qu").html(quotes[rand]);
It's html structure got changes. you no longer have a by element.
Therefore, when you try to $("#by").html(by[rand]); nothing happens. Because no by element was found.
Solution: move your by element outside the blockquote
Working code: https://codepen.io/anon/pen/MrLodd
You have to separate the id in two paragraphs inside the blockquote. You can't give the blockquote and id and then expect the paragraph tag to also pick up an id inside of it. The blockquote overrides it.
<blockquote>
<p id="qu">
Here are some of my favourite quotes.Hope you enjoy them!
<p>
<p id="by">
random text
</p>
</blockquote>
I have different requirement for my webpage. For that I need to change the DOM elements. I will have the html from server through AJAX. Html is come from server for different pages is different. Like,
<h1> Some text </h1>
Text out of tags
<div>
<p> Text in div </p>
<img src="some-image.jpg" />
</div>
<p> Some other text </p>
<p> Some other text </p>
<img src="some-image.png" />
Something like that.
When it appears in webpage, It would be like,
Some text Text out of tags
Text in div An Image
Some other text
Some other text
Another Image
So, what I need is, I want to convert the above HTML DOM structure as follows by using Javascript or jQuery.
<p> Some text Text out of tags Text in div</p>
<img src="some-image.jpg" />
<p> Some other text </p>
<p> Some other text </p>
<img src="some-image.png" />
I just want text through <p> tags and images through <img> tags. I don't require remaining all other stuff.
If it is possible, please help me.
Any help would be appreciated.
You can use
$("<selector>").contents().unwrap();
with all the element you want to remove.
For example:
$(document).ready(function() {
$('h1, div, a').contents().unwrap();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p> <h1> Some text </h1> </p>
<div> <img src="some-image.jpg" /> </div>
<p> Some other text </p>
<p> Some other text </p>
<img src="some-image.png" />
Similar to this question remove parent element but keep the child element using jquery in HTML
use replaceWith() and return the element you want
You can manipulate/edit the DOM structure received from the server. To hide certain <div> or <p> elements, try following :
document.getElementById("divWithImage").style.display = "none";
^^^^^^
Of course this will hide everything inside, so you should get hold of the inside contents like <img> and inject them again in the DOM at desired location.