I want to copy all the child elements of parent div into the text box using jquery.
I tried to find the solution over stackoverflow and google, but did not find any solution. Please help, i will be very greatful. Thanks in advance
<div id="hello">
<div class="sub1">Hello how are you</div>
<div class="sub2">Hello how are you</div>
<div class="sub3">Hello how are you</div>
</div>
</div>
I want to copy all the children elements in the text
The output should come like this:
<input type="hidden" value="<div class="sub1">Hello how are you</div><div class="sub2">Hello how are you</div><div class="sub3">Hello how are you</div></div>" id="textbox">
use html() to get the all the dom and text value
$("#textbox").val($("#hello").html());
Try this
alert($("#hello").html())
$('input:hidden').val($("#hello").html())
to achieve this you can do as below:
var values=$('#hello').html();
$('#textbox').val(values); // textbox is the id of hidden field you specified
Related
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.
Say I have a div with an id (main comment) and more divs underneath with reply id's. I want to dynamically add the content of the comment to the end at the end of the replies. I can't grab the id of the last reply, but I can grab the id of the main comment (which is also the id of the commentbox which is always at the end. Something like this:
<div class="commentArea">
<div class="comment_'.id.'"> Something </div>
<div class="reply_'.replyid.'"> What kind of comment is that? </div>
<div class="reply_'.replyid.'"> What kind of reply is that? </div>
<div class="reply_'.replyid.'"> You guys are strange. </div>
<div class="replyToComment_'.id.'"> some button and stuff </div>
</div>
I want to add content inside commentArea right before replyToComment_'.id.' ...
I had an idea that probably works and looked like this (I was thinking maybe there was some easier way to do it).
<div class="commentArea">
<div class="comment_'.id.'"> Something </div>
<div class="reply_'.replyid.'"> What kind of comment is that? </div>
<div class="reply_'.replyid.'"> What kind of reply is that? </div>
<div class="reply_'.replyid.'"> You guys are strange. </div>
<div class="newReply"></div>
<div class="replyToComment_'.id.'"> some button and stuff </div>
</div>
And just add and empty div of newReply at the end of every reply posted...
Any other ideas?
.appendTo() of jQuery is what you need:
http://api.jquery.com/appendto/
Ok I thought about few ways to achieve this goal... "If i understand correctly what you were trying to ask"
By this way you do not need even to use ID as a class.... unless there is a specific reason to this?!?!
If not then move the id to id attribute and give it something like this
id="2,56"
2 = the question || post id
56 = the answer id
by this way you will have more control on your posts and comments
1. if reply_ is an individual class
$('.reply_')[$('.reply_').length - 1].after(comment);
2. if replyToComment_ is an individual class
$('.replyToComment_').before(comment);
I am not sure, I understood your question correctly, but I think .prepend() would help you.
You will need to wrap your last div i.e. <div class="replyToComment_'.id.'"> some button and stuff </div> with some other div and do .prepend() on that parent everytime. Like this:
<div class='parentContainer'>
<div class="replyToComment_'.id.'"> some button and stuff </div>
</div>
And do $(".parentContainer'").prepend(newComment) to add comment everytime.
This is how I would do it:
$("#addtxt").click(function () {
$("[class^='replyToComment']").before("<div class='newReply'>" + $("#text").val() + "</div>");
});
Here is the JSFiddle demo
I have a html structure like below:
<div class="element1>
</div>
I want to create another div.element right after div.element1 so I use element2.appendTo("div.element1") but it's being created like below:
<div class="element1>
<div class="element2">
</div>
</div>
What I really what to be done is like below:
<div class="element1>
</div>
<div class="element2">
</div>
How this can be done?
You should use after to insert elements like you want.
Try it:
$('.element1').after(element2);
Regards.
use insertAfter() :-
$(".element2").insertAfter($(".element1"));
With jQuery you can user after or insert to the parent:
$('#element1').after('#element2')
$('#element1').parent().append('#element2')
I have an HTML5 page structure like this:
<article id="article_id">
<div></div>
<div> </div>
<div> </div>
<form id="form_id">
<input id="" onsubmit="submit()"/>
</form>
</article>
Now I want to add a new div after div and before form. How should I do it?
I have tried:
$("#form_id").befor('<div id="div_id" class="block">');
$("#form_id").parent().befor();
$("#form_id").after('<div id="div_id" class="block">');
The HTML code works fine.
First of all, it's before. Secondly, you must pass an argument to it. The html that you will put before the form.
$("#form_id").before('<div class="block"></div>');
demo http://jsfiddle.net/uHrKG/1/
I have a code something like this:
<div id="specialDiv">
<div id="div1">
<div id="div2">
</div>
</div>
<div>
The div1 and div2 are hidden and right now in order to display them i am doing something like this:
$('#div1').show();
$('#div2').show();
It works but is there an elegant way to do this other than
$('#speicalDiv div').show();
Thanks.
You can use a multiple selector:
$("#div1, #div2").show();
$('#specialDiv div').show(); will show all div inside #specialDiv.
However, you don't have to hide the divs inside at all - hiding the parent is sufficient.
If you just wanted to show divs directly inside #specialDiv (in your case: #div1), you could select those using #specialDiv > div.
If you wish to add a class to the hideable divs, you can reference the class in the show()/hide() statements.
Otherwise, your method looks as elegant as possible.
Put the divs into a class. i.e.
$('.toshow').show();
Then they can be anywhere on the page and could be other things than divs if required.
Similar to what you've already suggested, you could do something like:
$('#specialDiv div').show();
But a more flexible approach would be to add a new class name to the divs you want to show:
<div id="specialDiv">
<div id="div1" class"hidden">
<div id="div2" class="hidden">
</div>
</div>
<div>
Then show them like so:
$('#specialDiv .hidden').show();