How to change text in div without affecting child elements - javascript

I need to modify the following HTML using Javascript,
<div id="1">
some text
<div id="2"></div>
</div>
I have tried using $('#1').text('new text'); However, this unintentionally removes <div id="2">
How should I change some text, without changing the surrounding elements?

This will change the value of the first node (which is a text node in your example):
$('#1').contents()[0].nodeValue = 'new text';
JSFiddle

Try the following
<div id="1">
<span id='myspan'>some text</span>
<div id="2"></div>
</div>
Then use;
$('#myspan').text('new text');

By the way it is a bad practice to use ids with numbers as elements.
You can add a span if you don't want to change the style of your element.
So in your case you will do something like this (I removed the numbers as ids):
<!-- HTML -->
<div id="text-container">
<span id="some-text">some text</span>
<div id="something-else"></div>
</div>
And in your JavaScript:
//JavaScript
$('#some-text').text('new text');

If plausible, do something like the following:
<div id="1">
<span id="edit">some text</span>
<div id="2"></div>
</div>
Then, you can edit your text like so:
$('#edit').text('new text');
Basically, your putting the text you want to edit in its own element with an ID. Keep in mind that you can use any type of element you want, you don't have to use span specifically. You can change this to div or p and you'll still achieve the same result.

the best solution is to check the node type as Node.TEXT_NODE and nodeValue is not null:
$('#1')
.contents()
.filter(function() {
return this.nodeType === Node.TEXT_NODE && this.nodeValue && this.nodeValue.trim();
})
.replaceWith("new text");

My solution as an alternative to others:
var text_to_keep = $('#2').text();
$('#1').text('new text').append('<div id="2">' + text_to_keep + '</div>');
http://jsfiddle.net/LM63t/
P.S. I don't think id's that begin with a number are valid.

Related

Get <li> text number using jquery

i am trying to get li tag text value using js but i am not getting the expected output
i.e ("Pens").
I have added a code snippet.
Note - I cannot change html.
console.log(jQuery('#accordionItem li span').html());
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="accordionItem" class="filter_middle-stage2-list_wrapper">
<li style="font-weight: bold;">Pens<span>(1200)</span></li>
</div>
Any thoughts on this ?
Use the text method like below:
console.log($('#accordionItem li span').text());
from what I understand you want the text of the li without the text of the span.
So you can use the replace function to do it like so:
console.log($('#accordionItem li').text().replace($('#accordionItem li span').text(), ''));
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="accordionItem" class="filter_middle-stage2-list_wrapper">
<li style="font-weight: bold;">Pens<span>(1200)</span></li>
</div>
if you want a more general solution that will get you just the text of the li without any of its children that would be a better solution:
console.log($('#accordionItem li').contents().get(0).nodeValue);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="accordionItem" class="filter_middle-stage2-list_wrapper">
<li style="font-weight: bold;">Pens<span>(1200)</span></li>
</div>
You seem to be selecting the <span> tag on your jQuery selector.
Although I'd suggest using the text method to achieve what you are looking for.
No jQuery needed.
Since you have an element with ID, you can access it directly, and get the node's text and simply remove any non-digit characters, and you'll be left with the numeral value you are after.
The benefit of this method is the irrelevance of the DOM structure - it will always work for that element (with that ID), but can be applied to any <li> element, regardless if it has a <span> child (or any other children)
console.log(
accordionItem.children[0].firstChild.textContent
)
<div id="accordionItem" class="filter_middle-stage2-list_wrapper">
<li style="font-weight: bold;">Pens<span>(1200)</span></li>
</div>

How to replace a link text using JavaScript

I have an HTML code and I want to replace something by JavaScript.
<div class="maindiv">
<div class="childdiv">
Old Text
</div>
</div>
Now I want to change "Old Text" to another like "New Text".
Please let me know if it is possible.
You have to locate your element element inside the DOM , it would be better to use class or/and id propreties.
But in case if you are not allowed to edit the DOM you have to find a way to find the required element like crossing parents that do have an id or a class.
Get first element with this class childdiv.
Get first a tag inside the above found element .
Set innerHTML for the found element to the required value exp: New Text.
Javascript (as you asked for)
<div class="maindiv">
<div class="childdiv">
Old Text
</div>
</div>
<script>
document.getElementsByClassName("childdiv")[0].getElementsByTagName('a')[0].innerHTML="New Text";
</script>
Jquery (same logic as above)
$(document).ready(function(){
$(".childdiv a").text("New Text");
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="maindiv">
<div class="childdiv">
Old Text
</div>
</div>
You simply use document.getElementById("my-link").innerHTML = "New Text", but you should put an id attribute to your <a> tag like so:
<a id="my-link" href="www.abc.com" rel="prev">
^^^^^^^^^^^^
Or, if you don't want to edit anything on your original HTML (bad practice):
document.getElementsByTagName("a")[0].innerHTML = "New Text";
You can access such DOM object by using
document.getElementsByClassName("childdiv")[0].childNodes[1].textContent="Updated Text";
I don't really understand your issue but I have tried this and it's working...
<div class="maindiv">
<div class="childdiv">
Old Text
</div>
</div>
and jQuery
$(".link").click(function(e){
e.preventDefault();
$(this).text("New Text");
});
https://jsfiddle.net/294m3my6/
If you want JavaScript
<div class="maindiv">
<div class="childdiv">
Old Text
</div>
</div>
And JS
function Action(evt) {
evt.preventDefault();
document.getElementById("link").innerHTML = "Next Text";
}
document.getElementById('link').addEventListener(
'click', Action, false
);
https://jsfiddle.net/ep3v5u0k/
#Amani has solve my problem. It is what I wanted.
<div class="maindiv">
<div class="childdiv">
Old Text
</div>
</div>
<script>
document.getElementsByClassName("childdiv")[0].getElementsByTagName('a') [0].innerHTML="New Text";
Thanks you so much all of you specially Amani.

Encoding elements with jQuery

I would like to encode contents of elements using jQuery but I can't find a function which does this automatically, so I'm trying to create a function which does this content by content.
For example if I have the following HTML element:
<div>
text&
<p class="foo">barbaz8798++xyzzy</p>
<span>1<5</span>
</div>
The desired output would be:
<div>
text%26
<p class="foo">barbaz8798%2B%2Bxyzzy</p>
<span>1%3C5</span>
</div>
I need to encode only the contents of those elements. How can I achieve this?
One approach which came to my mind is to select the elements by wrapping everything into a wrapper and then calling wrapper.find("*") and then replace their text with element.text(encodeURIComponent(element.text())), but isn't there a better way, please?
You could iterate over the contents of the container element(div in your sample) the change the contents of all text nodes
//need to use a more specific selector for the div
$('div').find('*').addBack().contents().each(function() {
if (this.nodeType == Node.TEXT_NODE) {
this.nodeValue = encodeURIComponent(this.nodeValue.trim());
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
text&
<p class="foo">barbaz8798++xyzzy</p>
<span>1<5</span>
</div>

Retrieve text from an element and insert it somewhere else

I'd like to get the text from between the "p" tags and put it in an other element, like this:
before:
<div id="Text">
<p>$1,200.00</p>
</div>
<div id="putText">
<p></p>
</div>
after:
<div id="Text">
<p>$1,200.00</p>
</div>
<div id="putText">
<p>$1,200.00</p>
</div>
Anyone know of a Javascript that can do this?
The below function copies the contents of the first paragraph under an element with ID ID to a paragraph under another element with ID putID.
function copyContents(id) {
var source = document.getElementById(id).getElementsByTagName("p")[0];
var target = document.getElementById("put" + id).getElementsByTagName("p")[0];
target.innerHTML = source.innerHTML;
}
copyContents("Text");
you can use following jQuery code
$('#putText p').html($('#Text p').html());
If you have jQuery at your disposal, it's fairly easy - something like this should work:
$('#putText>p').text($('#Text>p').text())
If you don't, then you'll have to resort to some DOM manipulation - the same stuff jQuery does behind the scenes, only you need to code it up yourself.

jquery Remove siblings elements, doesn't work in IE7

I'm trying to remove all the sibling elements after a particular div, lets say the div tag with id = id8.
<form>
<div id="id5">something ...<div>
<div id="id8">something ...<div>
<div id="id3">something ...<div>
<div id="id97">something ...<div>
<div id="id7">something ...<div>
...
<div id="idn">some text ...<div>
</form>
To do that I use the following code in jquery.
$("#id8 ~ div").remove();
It works fine in Firefox, but It doesn't work in IE7.
Is there an alternative way to archieve this, using jquery and just giving the tag id from the element I want to start removing the elements?
Thanks
Thanks everybody for your help
I end up with this solution based on the accepted answer
function removeAfter(el,tag){
element = $('#'+el);
var aElements = $(tag,element.parent());
var index = (aElements.index(element));
for(i=(index+1);i<aElements.length;i++) {
$('#'+$(aElements.get(i)).attr('id')).remove();
}
}
just call
removeAfter('id8', 'div')
Two things!
1) Close your <div> tags! It should look like this:
<form>
<div id="id5">something ...</div>
<div id="id8">something ...</div>
<div id="id3">something ...</div>
<div id="id97">something ...</div>
<div id="id7">something ...</div>
<div id="idn">some text ...</div>
</form>
2) The ~ operator only matches siblings that follow the matched element (ie it will match id3, id97, id7 and idn, but not id5). To match every sibling, including id5, you do this:
$("#id8").siblings("div").remove();
That should leave you with just id8. I tested this in Firefox 3.5.5 and IE7.0something. Hope that helps!
Three steps here:
Find the index number of the element we've clicked, with respect to its parent.
Loop through all the div elements contained within this parent, starting after the one we just found
Delete each div found
$(document).ready(function(){
$('#parent').children().click(function(){
var index = ($('div',$(this).parent()).index(this));
for(i=(index+1);i<$('div',$(this).parent()).length;i++){
$($('div',$(this).parent()).get(i)).hide();
}
});
});
This will work on this HTML
<div id="parent">
<div id="c1">c1</div>
<div id="c2">c2</div>
<div id="c3">c3</div>
<div id="c4">c4</div>
<div id="c5">c5</div>
</div>
Comment here if you've got any more problems on the matter!
P.S. An application of this solution exact to your request is the following
function removeAfter(el){
element = $('#'+el);
var index = ($('*',element.parent()).index(element));
for(i=(index+1);i<$('*', element .parent()).length;i++){
$($('*', element.parent()).get(i)).hide();
}
};
EDIT:
Editing the answer below to add what should be a fix for the problem:
$("#id8").nextAll().remove();
END EDIT.
Ok. This appears to be an interesting bug - initial testing seems to indicate it's a jquery bug although I haven't found any specific mention of it anywhere.
The bug seems to be that if your initial selector tag is the same type as its siblings then it will fail to return any siblings in IE7.
I tested it using the jQuery example code for the selector itself and was able to duplicate your problem in IE8 emulating IE7.
If you check the jquery example code I'll stick below you can see that the actual element they're using as the initial selector is a span and the sibling elements are all divs whcih seems to me to indicate they know about this bug and haven't documented it, which is both cunning and shitty.
<script>
$(document).ready(function(){
$("#prev ~ div").css("border", "3px groove blue");
});
</script>
<div>div (doesn't match since before #prev)</div>
<span id="prev">span#prev</span>
<div>div sibling</div>
<div>div sibling <div id="small">div niece</div></div>
<span>span sibling (not div)</span>
<div>div sibling</div>
Change the #prev span to a div and you'll get the same failure as you're getting currently. I'd submit a bug with the jquery team.

Categories

Resources