Here's what I've got:
<div id="fivearea">Something</div>
Then later:
var 5popup= $('#fivearea').text();
This makes 5popup = "Something".
However, I want to add some more text to what's in the div and save that as a variable. Psuedo-code:
var 5popup= $('#fivearea').text()+"some additional text";
What's the correct way to do this?
You will want to add to the current value of the variable like this:
5popup += "some additional text";
Replacing the text inside the node below:
<div id="testId">hello</div>
Can be accomplished as follows
$("#testId").html("good bye");
Resulting in the html:
<div id="testId">good bye</div>
Similarly the text inside the node can be saved to a variable as follows:
var myTest = $("#testId").html();
If you want to add to the text inside a node without deleting anything, this can be accomplished with the append function. Given the following html.
<div id="testId">hello</div>
The code:
$("#testId").append(" world");
Will result in the html:
<div id="testId">hello world</div>
I think this is what you want:
var text = $('#fivearea').text();
text += "Your text here";
$('#fivearea').text(text);
If you want to access the text, use the variable text. Hope this helped.
Related
I have text in contenteditable div and user can copy some its parts and paste inside this div. But there are styles coping with text, so i need to take copied part and take just text from it, so i'm making
<div id="text-container" contenteditable ng-paste="textPaste($event)"></div>
and js:
$scope.textPaste= function (e) {
var pasted_text = e.originalEvent.clipboardData.getData('text/plain');
e.originalEvent.clipboardData.setData('text/plain', pasted_text);
};
So I really get the text I need to the variable pasted_text , but it's not pasted instead of origin text. Can anybody help me?
Possible solution: create detached DOM element, paste formatted text into it and then return its textContent property:
var phantomEl = document.createElement('div');
phantomEl.innerHTML = pasted_text;
var cleanText = phantomEl.textContent;
After this, you will have plain text in the cleanText variable.
How to get the html of element itself using Jquery html. In the below code I would like get the input element inside div using JQuery as shwon below
<div id="content">content div</div>
<input type='text' id="scheduledDate" class="datetime" />
$(function() {
console.log($('#scheduledDate').html('dsadasdasd'));
$('#content').html($('#scheduledDate').html());
});
EDIT:
Can I get the $("#scheduledDate") as string which represent the real html code of the input box, because my final requirement is I want to pass it to some other SubView( I am using backboneJS) and eventually use that html code in a dust file.
My original requirement was to get that input field as string so that I can pass it to some other function. I know, if I keep it inside a DIV or some other container, I can get the html by using .html method of JQuery. I dont want use some other for that purpose. I am just trying to get html content of the input box itself using it's id.
If you want to move the input element into div, try this:
$('#content').append($('#scheduledDate'));
If you want to copy the input element into div, try this:
$('#content').append($('#scheduledDate').clone());
Note: after move or copy element, the event listener may need be registered again.
$(function() {
var content = $('#content');
var scheduledDate = $('#scheduledDate');
content.empty();
content.append(scheduledDate.clone());
});
As the original author has stated that they explicitly want the html of the input:
$(function() {
var scheduledDate = $('#scheduledDate').clone();
var temporaryElement = $('<div></div>');
var scheduleDateAsString = temporaryElement.append(scheduledDate).html();
// do what you want with the html such as log it
console.log(scheduleDateAsString);
// or store it back into #content
$('#content').empty().append(scheduleDateAsString);
});
Is how I would implement this. See below for a working example:
https://jsfiddle.net/wzy168xy/2/
A plain or pure JavaScript method, can do better...
scheduledDate.outerHTML //HTML5
or calling by
document.getElementById("scheduledDate").outerHTML //HTML4.01 -FF.
should do/return the same, e.g.:
>> '<input id="scheduledDate" type="text" value="" calss="datetime">'
if this, is what you are asking for
fiddle
p.s.: what do you mean by "calss" ? :-)
This can be done the following ways:
1.Input box moved to the div and the div content remains along with the added input
$(document).ready(function() {
var $inputBox = $("#scheduledDate");
$("#content").append($inputBox);
});
2.The div is replaced with the copy of the input box(as nnn pointed out)
$(document).ready(function() {
var $inputBox = $("#scheduledDate");
var $clonedInputBox = $("#scheduledDate").clone();
$("#content").html($clonedInputBox);
});
Div is replaced by the original input box
$(document).ready(function() {
var $inputBox = $("#scheduledDate");
$("#content").html($inputBox);
});
https://jsfiddle.net/atg5m6ym/4485/
EDIT 1:
to get the input html as string inside the div itself use this
$("#scheduledDate").prop('outerHTML')
This will give the input objects html as string
Check this js fiddle and tell if this is what you need
https://jsfiddle.net/atg5m6ym/4496/
I've been searching and trying different codes, but I don't came up to a solution.
This script i'm trying to create do this:
When the user clicks inside a div with class="Box". The program will save in a variable the content of the Box.
var boxContent = $(this).parents('.Box')[0].innerHTML;
So, the value of the variable boxContent now (acording to my html output will be) returns the hole div that the user clicked:
<div class="Box">
<div class="URL_ID">
<span>http://test.com</span>
<span id="ID">3232434</span>
</div>
<div class="info">
</div>
<div class="secondLink">
</div>
</div>
Now what i'd like to take is the div to process later and do an append in a table. So i tried to use find(), but doesn't work...
var url = boxContent.find('.BoxSongUrl');
What can i do??
Thanks in advance.
Your statement:
So, the value of the variable boxContent now (acording to my html output will be) returns the hole div that the user clicked:
Is not true. innerHTML returns a string of the markup html inside the element. To use the Jquery's .find() method, you have to actually select the Jquery object:
var url = $(this).parents('.Box').find('.BoxSongUrl');
You can use clone to retain a copy of the first '.Box' element at the time the query is run.
var boxContent = $(this).parents('.Box').first().clone();
Then, you can use the find method on boxContent
var url = boxContent.find('.BoxSongUrl');
EDIT:
If you would rather not clone the whole jQuery object you would save the html and re-parse it before calling find.
var boxContent = $(this).parents('.Box').first().html();
Then, re-parse the HTML into a jQuery object:
var url = $(boxContent).find('.BoxSongUrl');
I am not sure how practical this question is , but what i am trying to do is find html inside a string and then append pre tags to it using jquery. let say i have a variable with following string.
var string = "Some normal text <html><body><div> This is the html </div> </body></html>";
Html inside the string is dynamic and can contain any tags , what i want is to find the starting and ending of html and append,prepend pre tags accordingly.
Thanks
The following code does pretty much what you want, however it does not allow html, body tags etc. But those are not allowed in pre tags anyway.
var string = "Some normal text <html><body><div> This is the html </div> </body></html> more text<p>more html content</p>";
var holder = $('<div>').html(string);
holder.children().wrap('<pre>');
//Print result to console
console.log(holder.html());
Also a jsFiddle here: http://jsfiddle.net/evBCm/1/
Add the text to dynamic html tag e.g span or div and find desired node e.g
var string = "Some normal text <html><body><div> This is the html </div> </body></html>";
$("<span/>").html(string).find('div')
Apply bellow regix..
var string = "Some normal text <html><body><div> This is the html </div> </body></html>";
var iMatches = string.match("<html>(.*)</html>");
var iHtml='<html>'+iMatches[1]+'</html>';
alert(iHtml);
I have some text that is stored in a variable like this:
<div class="foo">text inside div</div>
outside text here.
I want to remove the entire div and the text in it and save the outside text.
Create an element based off the HTML. Then,
$('.foo', context).remove();
For example:
var text = "<div class=\"foo\">text inside div</div>\noutside text here.";
var xml = $('<root>' + text + '</root>');
$('.foo', xml).remove();
text = xml.html();
You can use after, to insert the inner text after the div, and then remove it:
var $foo = $(".foo");
$foo.after($foo.text()).remove();
Or you could use the replaceWith function, to replace the div element with its inner text content:
$foo.replaceWith($foo.text());