I thought this one would be easy, but after an hour of googling, i still haven't found anything.
I know how to update content in a div with jquery:
$(".div").html("stuff");
but that replaces the current content in the DIV (over writes it). I need the current content to remain there.
I don't mind if you know a way in Javascript or Jquery.
Thanks
You can either use append(), prepend() or html()'s inbuilt function:
$('div').html(
function(index,oldhtml){
var newString = 'something';
$(this).html(newString + ' ' + oldhtml);
});
JS Fiddle demo.
References:
append().
html().
prepend().
I think you're looking for .append()
Concat?
var old_content = $(".div").html();
$(".div").html(old_content + "newstuff");
Related
$('.email').each(function(l,i){
var that = $(this);
var thatOtherOne = $(this:after);
$('<a>').attr('href', 'mailto: '+ that.html + thatOtherOne.css('content')).insertAfter(that);
that.hide();
});
.email:after {
content: "#mydomain.com";
}
<span class="email">info</span>
Hello again Stackoverflow!
This is my method against spam. Using CSS the :after selector and content I try fill my custom email in inside the <span> and the css adds the url. This doesn't make it clickable though, so that's why I try the above method using JS/jQuery.
This sadly doesn't work because $(this:after); is not a valid selector. How can I change this?
You simply cannot construct a selector like that; it really doesn't make syntactic sense. Selectors are for searching through the DOM. To do what you're trying to do, you can try using the attr() trick in your "content":
.email:after {
content: attr(data-domain);
}
Then in your markup:
<a class=email data-domain='#whatever.com'>info</a>
And your JavaScript can then do this:
$('.email').each(function(l,i){
var that = $(this);
var domain = that.data('domain');
$('<a>').prop('href', 'mailto: ' + that.text() + domain).insertAfter(that);
that.hide();
});
The idea is to keep stuff that your code actually needs to use in a separate attribute, and then use the attr() operator (or whatever you want to call it) in the CSS rule to get that attribute value and use it as content. The operator can be combined with strings if you like. Chris Coyier has a good blog post about it.
Via ajax i retrieve some json data, make it as html and append it to my page.
Here I have a problem. I cant access element by id, if id is variable.
For example, http://jsfiddle.net/f8g5e/1/
<div id="123">Hello</div>
<div id="321">Bye</div>
<div id="out"></div>
$(function(){
key = '123';
$('#' + key).hide();
$('#321').hide();
});
The simples thing is works! #123 and #321 elements are hidden. Yeah, it's pretty obviosly.
But, in my project, when I append data to page:
$('#123') //returns element
$('#' + key) //returns null
Some code:
// generating data
var htmlData = '<div id="123">Greetings!</div><div id="321">Bye bye</div>';
// appending data
$('#tweets').empty();
$('#tweets').append(htmlData);
What are the possible causes i can't access elements?
Thanks.
UPDATE
Dont know how it works in JSFiddle, but when I changed my IDs to properly names it began to work now. Thanks to all! Next time, I'll take more attention to w3c dom standarts ;) Happy New Year!
The only reason I can think of that $('#'+key) wouldn't work is because the variable key is undefined.
Note: you're not supposed to start an ID with a number according to the W3C spec. However, most browsers allow it, so I doubt this is causing your problem.
However, if you have two divs with the same ID attribute, then JavaScript will only select the first one it finds -- IDs are supposed to be unique. If this is happening, use classes instead.
You can either do this:
$(function() {
$('#321,#123').hide();
});
or you can do this:
$(function() {
var key = '123';
var doit = '321';
$('#' + key + ',#' + doit).hide();
});
Can anyone tell me how can I use these two functions without using jQuery?
I am using a pre coded application that I cannot use jQuery in, and I need to take HTML from one div, and move it to another using JS.
You can replace
var content = $("#id").html();
with
var content = document.getElementById("id").innerHTML;
and
$("#id").append(element);
with
document.getElementById("id").appendChild(element);
.html(new_html) can be replaced by .innerHTML=new_html
.html() can be replaced by .innerHTML
.append() method has 3 modes:
Appending a jQuery element, which is irrelevant here.
Appending/Moving a dom element.
.append(elem) can be replaced by .appendChild(elem)
Appending an HTML code.
.append(new_html) can be replaced by .innerHTML+=new_html
Examples
var new_html = '<span class="caps">Moshi</span>';
var new_elem = document.createElement('div');
// .html(new_html)
new_elem.innerHTML = new_html;
// .append(html)
new_elem.innerHTML += ' ' + new_html;
// .append(element)
document.querySelector('body').appendChild(new_elem);
Notes
You cannot append <script> tags using innerHTML. You'll have to use appendChild.
If your page is strict xhtml, appending a non strict xhtml will trigger a script error that will break the code. In that case you would want to wrap it with try.
jQuery offers several other, less straightforward shortcuts such as prependTo/appendTo after/before and more.
To copy HTML from one div to another, just use the DOM.
function copyHtml(source, destination) {
var clone = source.ownerDocument === destination.ownerDocument
? source.cloneNode(true)
: destination.ownerDocument.importNode(source, true);
while (clone.firstChild) {
destination.appendChild(clone.firstChild);
}
}
For most apps, inSameDocument is always going to be true, so you can probably elide all the parts that function when it is false. If your app has multiple frames in the same domain interacting via JavaScript, you might want to keep it in.
If you want to replace HTML, you can do it by emptying the target and then copying into it:
function replaceHtml(source, destination) {
while (destination.firstChild) {
destination.removeChild(destination.firstChild);
}
copyHtml(source, destination);
}
Few years late to the party but anyway, here's a solution:
document.getElementById('your-element').innerHTML += "your appended text";
This works just fine for appending html to a dom element.
.html() and .append() are jQuery functions, so without using jQuery you'll probably want to look at document.getElementById("yourDiv").innerHTML
Javascript InnerHTML
Code:
<div id="from">sample text</div>
<div id="to"></div>
<script type="text/javascript">
var fromContent = document.getElementById("from").innerHTML;
document.getElementById("to").innerHTML = fromContent;
</script>
I am looking around on the web but I am not finding anything useful. :(
I am having a problem that I don't understand. I am sure that I am doing something wrong, but I don't know well the syntax of jQuery to understand what is that I am not doing right.
I am using animations with JS and CSS 3, and I am having troubles with empty spaces between the words, and to solve this problems I have to find a way to substitute chars inside a string of text with something else. Like an empty space with a , or as a test that I was trying to do a "n" with a "xxxxx".
What I think that I am doing is:
when the page is loaded
Modify the string of any paragraph with the class .fancy-title that contains "n" with a text "xxxxx"
So:
$(document).ready(function(){
for(i=0; i< myLength+1; i++){
var charCheck = $(".fancy-title").text()[i];
if(charCheck == "n"){
charCheck.replace("n", "xxxxxxxx");
}
}
});
But I receive an error that it said:
charCheck.replace("n", "xxxxxxxx"); it is not a function
I am using jquery
and other scripts that are based on jquery to make animations, rotation and scaling... and they are all in the HEAD with jquery first to load.
What am I doing wrong? Manipulation in jQuery does it need a specific .js extension? I understood that was in the basic capability of jQuery, and looking at other examples all creates me the same kind of error.
I even tried
if(charCheck == "n"){
$(".fancy-title").text()[i] == " "
}
But simply the modification it is not applied on the page. I tried with innerHTML as well :(
I feel so incompetent...
Thank you in advance for any help.
$(document).ready(function(){
$(".fancy-title").each(function(i){
var text = $(this).html();
$(this).html(text.replace(/ /g, " "));
})
});
You have no problem with the replace part :).
$(document).ready(function(){
$(".fancy-title").each(function () { //for all the elements with class 'fancy-title'
var s=$(this).text(); //get text
$(this).text(s.replace(/n/g, 'xxxxxxxx')); //set text to the replaced version
});
});
Just a quick example, hope it works.
Have you tried the css style white-space:pre instead of replacing ' ' with ' '?
http://de.selfhtml.org/css/eigenschaften/ausrichtung.htm#white_space
It seems you are trying to replace a single character with a new string.
You might be able to get the right result by dropping the iteration and simply call .replace on the jQuery-object.
i'm a little confused.
i want to actually reload the same page and fetch a div with a certain id from it. so i'm trying to reload a part of website into the same part of the website. ;) i know it sounds weird.
somehow i don't get what i'm doing wrong or better how i have to do it.
var $sv = $('#server_view');
$sv.load('/server/ftp/' + goToURL + " #server_view");
so in this case the same div gets loaded into the same div and that's not what i want.
it then looks like:
<div id="#server_view"> <div id="#server_view"> blabla</div> blabbla </div>
i actually just want to grab the contents of the div inside and reload them. how can i solve this little problem.
You can grab the children with the selector you're passing to .load(), like this:
var $sv = $('#server_view');
$sv.load('/server/ftp/' + goToURL + " #server_view>*");
All we're doing different is getting all direct children to insert using the > child selector.
use .get and replace the element
$.get('/server/ftp/' + goToURL, function(response){
var newContent = $(response).find('#server_view').html();
$('#server_view').replaceWith( newContent );
});
Simple end fast.
$( "#content" ).load( "# #content>*" );
if you are using $('#server_view');, you must have DIV ID as server_view, not #server_view