I would like to replace the innerHTML of a of a particular class with the innerHTML of a different elemets innerHTML based on that other elements class. I'm trying to dynamically match a header to the selected menu item.
Basically I want to take the innerHTML of whatever has the class "categorySidebarLabelSelected".
<a class="categorySidebarLabelSelected">Guest Relations</a>
And replace the "Start a document" with "Guest Relations" based on the class "areaTitle".
<div class="areaTitle">Start a document</div>
so the results would be:
<div class="areaTitle">Guest Relations</div>
Using getElementsByClassName.
document.getElementsByClassName('areaTitle')[0].innerHTML = document.getElementsByClassName('categorySidebarLabelSelected')[0].innerHTML;
Read something like that: http://api.jquery.com/text/
var str = $( "categorySidebarLabelSelected" ).text();
$( "areaTitle" ).html( str );
Related
I am trying to delete a span class from a HTML string using Jquery. My HTML string looks like this:
<li class="left clearfix"><span id="userAvatar" class="chat-img pull-left"><img src="http://placehold.it/50/55C1E7/fff&text=U" alt="User Avatar" class="img-circle"></span><div class="chat-body clearfix"><div class="header"><strong class="primary-font">sdfsdf3424</strong></div><p>dfgfg</p></div></li>
To delete the span tag from this string I am doing the following:
var JqueryObj = $('<div/>').html(stringHTML).contents();
JqueryObj = JqueryObj.not("#userAvatar");
stringHTML = JqueryObj.html();
Where am I going wrong? Also is it possible to change the font color of the paragraph tag inside this string?
For your first question, you should just be able to do the following:
var htmlstring = '<li class="left clearfix"><span id="userAvatar" class="chat-img pull-left"><img src="http://placehold.it/50/55C1E7/fff&text=U" alt="User Avatar" class="img-circle"></span><div class="chat-body clearfix"><div class="header"><strong class="primary-font">sdfsdf3424</strong></div><p>dfgfg</p></div></li>'
var obj = $("div").html(htmlstring);
obj.find("#userAvatar").remove();
var newhtmlstring = obj.html();
This makes a new element that has the contents of the htmlstring in it. Then, the find part finds all direct and indirect children with the selector and removes them. finally, the new html string is the contents of the temporary object we created before.
Using .find(), you can also change the font color:
obj.find("p").css("color", "red");
here is a possible solution which explains how to remove span in a div.
var divContent = $("div").html(stringHTML);
divContent = $(divContent).find("#userAvatar").remove();
$("div").empty().html($(divContent).html());
use
$( "span" ).remove();
DEMO : http://jsfiddle.net/ryxbpn2s/2/
I am not exactly sure what you are trying to achieve so I will post a few solutions, maybe one of them will solve your problem.
1) You want to remove the a class from span#userAvatar:
You should use jQuerys removeClass function.
Usage:
$( "#userAvatar" ).removeClass( "className" )
2) You want to remove the span but keep the contents:
You can just replace the whole span with what's inside.
Usage:
$("#userAvatar").replaceWith(function() {
return $("img", this);
});
3) You want to remove the span class and everything that's inside it:
You should use jQuery's remove() function.
Usage:
$("#userAvatar").remove();
To change the colour of the paragraph you can use jQuery's find() function.
Usage:
JqueryObj.find("p").css("color", "#EEEEEE");
Hope this helps.
I am using append to append some input data with div. After some appending, I have data as below :
<div id="holder">
</div>
var data = "<div id=1><input type='text' id='test_1' name='test_1'></div><div id=2><input type='text' id='test_2' name='test_2'></div>"
$("#holder").append(data );
I am appending data using append. Now, I want to remove particular div based on id.
For i.e. if id is 1 then remove this row. <div id=1><input type='text' id='test_1' name='test_1'></div> and like that for all.
I tried $("#holder").remove(), but it will remove all data. I want to remove particular div then what to do ?
yes $("#holder").remove() will remove everything because this is the parent div consisting of all child divs(like div id=1)
Its a bad practice to give as numericals like the way you are doing(id=1,id=2 etc)
Append some alphabets along with number like id=a1,id=a2....
to remove a particular div
try
$("#a1").remove()
from the comments above you have said that you will get the id from click
so try like below
$(selector).click(function(){
var id=//get the id of the div
$("#a"+id).remove()
});
I think this could work:
var theId = document.getElementById("1");
theID.remove();
I want to strip all html tags from user input.
This code strip all html tags from #container, except anchor and img tags.
$("#container").find('*:not(a,img)').each(function() {
$(this).replaceWith(this.innerHTML);
});
I can't convert it to find input text .val();
$('#inputTxt').val().find('*:not(a,img)').each(function() {
$(this).replaceWith(this.innerHTML);
});
This code shows error :
$input.val().find() is not a function.
Can someone help me?
Updated POST
well, the example Mr antyrat gave was removing all contents inside any other tags, but I wanted content of them, just removing their tags. so I changed it like this and it's wokring.
var tmpElement = $( $( '#inputTxt' ).val() ); // create tmp HTML node
tmpElement.find('*:not(a,img)').each(function() {
$(this).replaceWith(this.innerHTML);
});
return tmpElement.html();
PROBLEM
above code works well with some inputs like these:
<div> Hello I am a link </div>
<a href="#" ></a><div>Hello<img src="url" /></div>
but when user types something like this:
<div><a <div ></div> href="#" ></a></div>
the output is : <a <div=""> href="#" >Another link</a>
This is the jsfiddle
This hapens because val() method returns input value, not the jQuery object, and this value doesn't have method find()
In your code:
$(this).replaceWith(this.innerHTML);
this is reference to jQuery element, not Node so you can't get innerHTML.
Also if inputTxt is input element you can't find any elements inside it as they are just plain text. You need to convert them to HTML at first, for example:
var tmpElement = $( $( '#inputTxt' ).val() ); // create tmp HTML node
tmpElement.find( '*:not(a,img)' ).remove(); // remove everything except <a> and <img> elements
$('#inputTxt').replaceWith( tmpElement ); // replace input to it's HTML content
But you need to be sure that input has correct HTML in it and has at least one root node. So better is to wrap your HTML into container, <div> for example:
var tmpElement = $( '<div>' + $( '#inputTxt' ).val() + '</div>' ); // create tmp HTML node
So the main problem you have is that you are trying to iterate over plain string like on elements.
See working demo on jsFiddle.
Update:
Event better is not to remove node w/ contents but just elements:
tmpElement.find( '*:not(a,img)' ).contents().unwrap(); // remove everything except <a> and <img> elements
updated jsFiddle
.val() returns a string, which is not a group of jquery objects, so .find() function doesn't work.
try:
$('#inputTxt').find('*:not(a,img)').each(function() {
$(this).replaceWith($(this).val());
});
For example I have a list title like this: <li id="example"> title </li>. And here is where I want it to be "appended to" on a click of a button: <ol id="playlist"> </ol>
Here is the button: <span onClick="Button();"> Button </span>
Here is the function:
Button=function() {
$('#playlist').append('#example');
}
I just don't see why it doesn't work I mean when I make the .append('title') - so just plain text - it will add that text to the tag but when I try to append a whole tag through the ID it doesn't? It instead appends "#example" which isn't what I want. I'm sorry I am still trying to grasp this language however, I have honestly searched and scouted the whole internet to try find an anwser to this.
Try this:
$('#playlist').append($('#example'));
Fiddle
Update:
You can use the clone() method, try this:
$('#example').clone().attr('id', 'something').appendTo($('#playlist'))
Fiddle
You need to append the whole li, so your solution would be:
function Button() {
var $li = '<li id="example"> title </li>';
$('$playlist').append($li);
}
.append( content [, content] )
content: DOM element, HTML string, or jQuery object to insert at the
end of each element in the set of matched elements. ...
jQuery is assuming that you are appending the HTML string #example literally. Use one of the the other two options e.g.:
$('#playlist').append($('#example')); // append a jQuery object
For the sake of completeness:
$('#playlist').append(document.getElementById('example')); // append a DOM element
If i have an HTML element like <div> with some text inside or another elements can I add before or after this div some text data without an html element, just plain text?
I'd like to use only pure Javascript.
Something like :
<div id="parentDiv">
my text must be added here
<div id="childDiv"></div>
</div>
Yes, you can create a text node with document.createTextNode('the text')
Then you can insert it like an element, with appendChild or insertBefore.
Example that insert a text before #childDiv:
var text = document.createTextNode('the text');
var child = document.getElementById('childDiv');
child.parentNode.insertBefore(text, child);
Just for the record:
div.insertAdjacentHTML( 'beforeBegin', yourText );
where div is your child-DIV.
Live demo: http://jsfiddle.net/ZkzDk/
If you just need text, I find that element.insertAdjacentText(position, text) is flexible for many scenarios and is also compatible with older browsers like IE6. Where position is exactly where you want the text to be and text is the text node or just a string. The options are:
'beforebegin' Before the element itself.
'afterbegin' Just inside the element, before its first child.
'beforeend' Just inside the element, after its last child.
'afterend' After the element itself.
Like this:
let div = document.getElementById('parentDiv');
div.insertAdjacentText('afterbegin', 'My Plain Text..');
In regards to the topic and the users question for inserting before or after, here is an example for after:
var text = document.createTextNode("my text must be added here.");
var childTag = document.getElementById("childDiv");
childTag.parentNode.insertBefore(text, childTag.nextSibling);
If the childTag does not have any siblings, it is okay because the insertBefore method handles this case and simply adds it as the last child.
Also can possibly use the appendChild() method after creating text node then add your childTag via the parentNode.
You can add text node. Create node - document.createTextNode('text') and then insert/append/replace - do whatever you want.
Something like this should do it:
<script type="text/javascript">
var parent = document.getElementById('parentDiv');
var sibling = document.getElementById('childDiv');
var text = document.createTextNode('new text');
parent.insertBefore(text, sibling);
</script>