I have this code:
<div>Text: Fly London</div>
I want to change the text "Text:" with JS, so I used this:
<script>
$(document).ready(function(){
$('.p-detail-info > div:contains("Text:")').text('Another text:');
});
</script>
But if I do it, the URL will disappear. How to change it if I want to keep URL?
Thank you!
You can also do this by simply add span tag and change the span tag text
$(document).ready(function(){
$('.p-detail-info > div > span:contains("Text:")').text('Another text:');});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<div class="p-detail-info">
<div><span>Text:</span> Fly London</div>
</div>
You'll have to select the text node, which is not possible with selectors alone, unfortunately. Select the parent div, get its first childNode (which is the text node we want), and then assign to the text node's textContent, no jQuery required:
document.querySelector('div').childNodes[0].textContent = 'Another Text';
<div>Text: Fly London</div>
Following should work fine for changing the text:
<script>$(document).ready(function(){$('.p-detail-info > div').text('Another text:');});<script>
Cheers,
Happy coding.
Related
I'm trying to catch a div text content and put on another with javascript using innerHTML
usually it works but what happens is that the inseriro text in the new DIV does not get the CSS
I'll try to explain better
I have a div in my wordpress site with the wp_iso_block ID
and I have a div in my HTML footer with iso-block id
I'm doing as follows
document.getElementById ( 'iso-block') innerHTML = document.getElementById ('wp_iso_block') innerHTML..;
so I type in a post wordpress updated text footer in my HTML
It works normally but does not receive the CSS attributes that were given to the div id iso-block appears only text
here it is the best source explained.
My Javascript in HTML
document.getElementById('iso-block').innerHTML = document.getElementById('wp-iso-block').innerHTML;
My HTML in Wordpress post
<div id="wp-iso-block">
ISO 9001:2008 <span>certified company</span>
</div>
I solved my problem by changing my code for that
<script type="text/javascript">
var wp_iso_block = $('# wp-iso-block').text();
$('#iso-block').text(wp_iso_block);
</script>
and using jquery, thank you all.
I have html for which I want to parse a specific node and change its content, along with making the font style of the new node value to italics. I am able to parse till the specific nodevalue but am not able to get how to change the fontstyle of the nodeValue.
In case of my problem
<html>
<head>
<script src="potrait.js"></script>
</head>
<body>
<p class="q">Here comes the count</p>
<ul class="q">
<li><p class="q" align="center">1</p></li>
</ul>
</body>
</html>
i want to change '1' to one(something), (something) should be in italics.
I get till 1 using the DOM method shown below
var list=document.getElementsByTagName('ul')
list[0].firstChild.nextSibling.childNodes[0].firstChild.nodeValue = "one(something)")
I am able to change the content but I am not able to get how to change (something) to italics.
Any guidance would be really appreciable..!!
Simply wrapping "(something)" in a italic tag ?
var list=document.getElementsByTagName('ul')
list[0].firstChild.nextSibling.childNodes[0].firstChild.nodeValue = "one<i>(something)</i>")
You can do it with .innerHTML and and an <i>:
var list=document.getElementsByTagName('ul');
var p = list[0].firstElementChild.firstElementChild;
p.innerHTML = "one<i>(something)</i>";
You can use jQuery to handle this problem easily. The code will be:
$("ul li p:first").html("one<i>(something)</i>");
That means take the first p tag within a li html tag in the ul and change its html content to one<i>(something)</i>. I have made a Plunker demo for you.
Be careful, because this code will replace all the first elements in your lists on your web page, where it has a p tag. To avoid that, you can assign to your desired ul a class. For example the list in your code has already have a class called q, so the code will look like:
$(".q :first").html("one<i>(something)</i>");
EDIT: To get a specific child(not absolutely the first) you can use :nth-child(<number of child>) insted of :first. For demos look at the jQuery documentation.
I'm trying to make a add to favorite system. I have a function which alerts the proper id I want to add.
I use:
<script type="text/javascript">
function addfavo(state_name)
{
alert(state_name);
}
</script>
And in my html I have a loop (with php) which shows all the images with the add to favorite links which looks like.
<div style="margin-top:40px;">
<a onclick="addfavo('<?php echo $imgid ?>')"><b>Add to favourits</b></a>
</div>
So what happens is I have a lot of links to the same function with different parameters, but I only want the link that I click to change the text (to something like added to favorites)
Can some one help me in the right direction?
I have tried adding:
$(this).innerHTML("test");
but it didn't work.
You might want to use the html method:
$(this).html('test');
While html is a jQuery method, innerHTML is a property of a DOM element. If you were using pure JavaScript, you'd probably use:
this.innerHTML = 'test';
However, as you are using the onclick attribute on your HTML tag, this will not point to your current DOM element inside your function scope. In your case, I'd add a class to your elements, like add_favorite and add your text to another attribute:
<div style="margin-top:40px;">
<b>Add to favourits</b>
</div>
And then apply a jQuery event to it:
<script type="text/javascript">
$(function() {
$('.add-favorite').click(function(e) {
var text = $(this).data('text'); // store the text in a variable
$(this).html(text); // replace your element's html with your text
e.preventDefault();
});
});
</script>
Fiddle: http://jsfiddle.net/MH6vY/
http://jsfiddle.net/2EvGF/
JS
$('.msgln').each(function() {
var text = $(this).text();
$(this).text(text.replace('Admin', 'sys-admin'));
});
HTML
<div class='msgln'><b>Admin</b>:<i> Chat cleared</i><br></div>
Replacing the class '.msgln' removes the formatting (bold, italics, etc.) How can I resolve this?
It might be happening because the css rules for bold, italcs etc might be defined for the class msgln, so once the class is removed the associated css rules also will be removed.
A solution is to add another class where the same css rules are defined
As it said here, http://api.jquery.com/text/#text2, it replace whole inner html with the given text.
You need to get down to the element that has the text you want to replace. In your case, it would be .msgln b
$('.msgln b').each(function() {
var text = $(this).text();
$(this).text(text.replace('Admin', 'sys-admin'));
});
I agree with sincebasic's solution. Here's my version with little update as you can have tag presented in other parts of the the HTML with the class "msgln". How about the following?
HTML
<div class='msgln'><b><span class="username">Admin</span></b>:<i> Chat cleared</i><br></div>
JS
$('.msgln span.username').each(function() {
var text = $(this).text();
$(this).text(text.replace('Admin', 'sys-admin'));
});
I have one textbox, button and and list box with some text.
When I click on button what ever the text I enter in text if it matches the text in the list box I am trying to highlight that text using jquery I used this code.
Jquery Code
$("#btnhighlight").click(function () {
alert("yes");
var htext = $("#txthighlighttext").val();
alert(htext);
$("#lstCodelist").highlight('MD');
});
Style sheet I used to hightlight and i downloaded the highlight plug in added to the project
<style type="text/css">
.highlight { background-color: yellow }
</style>
Please can any one help me out how to do this. or if I am doing wrong?
Can an
Maybe your problem is that your script is executed before DOM ready.
try with this:
$(function (){
$("#btnhighlight").click(function () {
var htext = $("#txthighlighttext").text();
$('#lstCodelist').highlight(htext);
});
});
or put your script at the body end.
ps. I supposed you used this plugin (jquery.highlight)
edit:
http://jsfiddle.net/yJmBu/ here a full example
This plugin is generating spans around the text it finds. Option tags can not contain any html tags so the following (Generated by your plugin)
<select>
<option><span class="highlight">Te</span>st</option>
</select>
is illegal syntax and will be ignored by the browser.
However if I understand your intent, there are some plugins out there that will accomplish something similar for you out of the box.
http://code.drewwilson.com/entry/autosuggest-jquery-plugin
Some proof that a nested span inside an option is not allowed.
html tags in the option tags
It is bad to put <span /> tags inside <option /> tags, only for string manipulation not styling?