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.
Related
My HTML:
<Div Class='POSTS'>
<Div Class='POST'>
<Div Class='CONTENT'>Text1</Div>
</Div>
<Div Class='POST'>
<Div Class='CONTENT'>Text2</Div>
</Div>
<Div Class='POST'>
<Div Class='CONTENT'>Text3</Div>
</Div>
<Div Class='POST'>
<Div Class='CONTENT'>Text4</Div>
</Div>
<Div Class='POST'>
<Div Class='CONTENT'>Text5</Div>
</Div>
<Div Class='POST'>
<Div Class='CONTENT'>Text6</Div>
</Div>
</Div>
And It Continues Without Any Limit...(Never Ending)
With Different Text Inside Each Element With Class Of "CONTENT".
I Searched Over This Website And Found This :
Https://Stackoverflow.Com/Questions/400212/How-Do-I-Copy-To-The-Clipboard-In-Javascript
But In The Project That I'm Working In I Can't Specify Id On Each Element As You Know It's Infinite Number Of These Elements:
<Div Class='POST'>
<Div Class='CONTENT'>some text</Div>
</Div>
So It Needs To Be Automatically Added.
And I Want To :
When User Clicks On The Text Inside Of Element With The Class Of "CONTENT" (No Matter How Long The Text Is And What It Have) , The Entire Text And Tags And ... Be Copied To Clipbored.
I Don't Want To Set Buttons !
I Want To Make The Whole
Tags,Text,And ....
Be Copied On Each One Of Them Without Any Limits!
By Clicking on it's own text.(imagine this as a textarea that user clicks on text inside of it and js copies all of text but this one is div with text inside of it)
If You Think I Missed Sth And It's Not Clear Enough Let Me Know!
Thanks In Advance!
This should solve your problem.
First select the entire object and then get the element which was clicked. Copy the content.
var posts = document.querySelector(".POSTS");
posts
.addEventListener("click", function (e) {
console.log("index", e.target);
navigator.clipboard.writeText(e.target.innerText).then(
function () {
console.log("Async: Copying to clipboard was successful!");
},
function (err) {
console.error("Async: Could not copy text: ", err);
}
);
});
is it possible by using JavaScript to open any tag, for example div#js and insert closing tag in any place I want, like on example below?
<div id="first"></div>
<div id="js">
<div id="second"></div>
<div id="third"></div>
</div>
<div id="fourth"></div>
If you start with:
<div id="first">1</div>
<div id="second">2</div>
<div id="third">3</div>
<div id="fourth">4</div>
and need to get this structure:
<div id="first">1</div>
<div id="js">
<div id="second">2</div>
<div id="third">3</div>
</div>
<div id="fourth">4</div>
the you can use $('#second').wrap('<div id="js"></div>').after($('#third')).
See demo below:
$('#second').wrap('<div id="js"></div>').after($('#third'));
#js {
color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="first">1</div>
<div id="second">2</div>
<div id="third">3</div>
<div id="fourth">4</div>
As you've tagged your code jQuery, I'll answer it in that sense. If you're programmatically inserting a div element into the page with juery, like this:
var bodyEl = $("body");
var myJsEl = $("<div>").attr("id", "js");
bodyEl.append(myJsEl);
... As has been noted, the $("<div>") code is the functional equivalent of document.createElement("div"), which creates the code block, both opening and closing the DOM element. Thus, when I create the element by either approach, programmatically speaking, the close is not something I can control.
That said, in the "bad old days" of document.write(), we did have the option of hard-coding opening tags and neglecting to include closing tags. DON'T DO THIS! It's deprecated, it's bad form and it can create serious coding issues later.
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.
I am making a HTML page, with JavaScript. In the HTML is the first content of a div, but when the user clicks a button, the text changes.
The text in the div is actual content, and needs to be findable by Google. The text is now stored in a simple variable in the JavaScript file.
Questions:
- Is that text indexed?
- Are there any better ways to store the text?
You can keep the text in a div and then change the visibility to hidden
<div id="content" style="visibility: hidden;">
Div content
</div>
Then in javascript,
document.getElementById("content").style.visibility="visible";
should make the document visible. Since the text will be there in the source for the page, it will be indexed by google, but will be displayed only when you run that line of javascript.
Storing the text in js variables is generally not a good idea.
You can put this text in a hidden div instead, like this:
<div id="target">
super-text
...
</div>
<div id="second">
super-mega-text
...
</div>
<button onclick="replace_text();">
<script type="text/javascript">
function replace_text() {
var target = document.getElementById('target');
var second = document.getElementById('second');
target.innerHTML = second.innerHTML;
}
</script>
In that case your second text will be indexed by Google.
Of course you better use any js framework like jQuery or Mootools.
Mootools example:
<div id="target">
super-text
...
</div>
<div id="second">
super-mega-text
...
</div>
<button id="button">
<script type="text/javascript">
window.addEvent('domready', function(){
$('button').addEvent('click', function(){
$('target').set('html', $('second').get('html'));
});
});
</script>
Javascript is not searched, see googles answer:
http://www.google.com/support/customsearch/bin/answer.py?answer=72366
I found a good article about hide/display content only with CSS. It's working without Javascript: http://www.devinrolsen.com/css-hide-and-display-content/
i have the following HTML code
<div id="myDiv">
<p>content</p>
</div>
and the following JS code:
$('myDiv').set('html',htmlCode);
the problem is that the variable htmlCode is something like:
<div id="myDiv"><p>another content</p></div>
so, the result when i run the JS code is something like:
<div id="myDiv">
<div id="myDiv">
<p>another content</p>
</div>
</div>
is there a way to use "set" so that it overrides the entire div? or another solution to get something like:
<div id="myDiv">
<p>another content</p>
</div>
as the result from the JS script?
i know i could just change the variable htmlCode... i just was wondering if there's another solution to this.
Mootools offers a simple replaces method!
//new tmp element that contains the new div
var tmpDiv = new Element('div',{html:'<div id="myDiv"><p>another content</p></div>'});
//new div (first child of my tmp div) replaces the old 'myDiv' (that can be grabbed from the DOM by $)
tmpDiv.getFirst().replaces($('myDiv'));
String.implement({
replaces: function(toReplace) {
Elements.from(this).inject(toReplace, 'after');
toReplace.destroy();
}
});
'<div id="a"><p>ipsum</p></div>'.replaces($('a'));
This should do. Example: http://jsfiddle.net/UvuwG/
$('myDiv').empty();
$('myDiv').adopt(Elements.from(htmlCode).getElement('p'));
You can do
$("myDiv").getParent().set("html", htmlCode);