I know this has to be be doable, does anyone know how and if you can do it?
or you can do it this way:
var myVar = 'sup fresh our turn baby!';
var myTextArea = document.getElementById('myArea');
myTextArea.innerHTML += myVar;
Something like this should work:
var textArea = document.getElementById("mytextarea"); // assuming there is a textarea with id = mytextarea
var textToAppend = document.createTextNode("Hello, World!");
textArea.appendChild(textToAppend);
EDIT: or, as Pointy suggested, the last two lines can be replaced by:
textArea.value += "Hello, World!";
function appendText(str) {
var obj=document.getElementById("myTextArea")
var txt=document.createTextNode("append this text")
obj.appendChild(txt)
}
Gee whiz guys:
document.getElementById('whatever').value += someJavascriptString;
Related
I got a string like this:
var select_string = '<select><option>1</option><option>2</option></select>';
I need to add some data params to select in this string and get this string back in order to get the following:
select_string = '<select data-param1="param1" data-param2="param2"><option>1</option><option>2</option></select>';
I tried to use jQuery functions like .html() or .text() but it did not work. Like this:
select_string = $(select_string).data('param1', 'param1').html() //or .text()
Any ideas how to make it work would be helpful. Thank you.
You can use attr to add that attributes to the element
var select_string = '<select><option>1</option><option>2</option></select>';
var select = $(select_string).attr({
'data-param1': 'param1',
'data-param2': 'param2'
});
console.log(select.prop('outerHTML'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Since your attribute name starts with data-, if you want to get the value, you can use:
select.data('param1'); // param1
select.data('param2'); // param2
EDIT: Titulum is right, jquery is not needed here.
But here is the working example usign jquery
var selectString = '<select><option>1</option><option>2</option></select>';
var $select = $(selectString);
$select.attr("prop_key","prop_value");
var selectChanged = $select.prop('outerHTML');
console.log(selectChanged)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
You don't need jQuery for this:
const myElement = document.createElement('div');
myElement.innerHTML = "<select><option>1</option><option>2</option></select>";
const selectElement = myElement.getElementsByTagName("select")[0];
selectElement.setAttribute("data-param1", "param1");
selectElement.setAttribute("data-param2", "param2");
You could use indexOf and substr() to split it into 2 parts, insert your new text, and put it back together again.
var first_half = select_string.substr(0, select_string.indexOf('>'));
var second_half = select_string.substr(select_string.indexOf('>'));
select_string = first_half + ' data-param1=\"param1\" data-param2=\"param2\" ' + second_half;
I want to escape a string taken from a textarea using the createTextNode() method. Appending the TextNode to the textarea doesn't work.
function myFunc(){
var str = document.getElementById("tarea").value;
var chld = document.createTextNode(str);
var prnt = document.getElementById("tarea");
prnt.appendChild(chld);
}
If you want to have the browser do the escaping work for you, I'd probably use a temporary element for that, then use its innerHTML as the argument to createTextNode:
function myFunc(){
var prnt = document.getElementById("tarea");
var str = prnt.value;
var div = document.createElement('div');
div.appendChild(document.createTextNode(str));
prnt.appendChild(document.createTextNode(div.innerHTML));
}
myFunc();
<textarea id="tarea">Testing & < ></textarea>
But minimally escaping HTML is very simple, you don't necessarily need to go whole-hog:
str = str.replace(/&/g, "&").replace(/</g, "<");
(No need for >, it's fine as it is if you're not inside a tag.)
E.g.:
function myFunc(){
var prnt = document.getElementById("tarea");
var str = prnt.value;
str = str.replace(/&/g, "&").replace(/</g, "<");
prnt.appendChild(document.createTextNode(str));
}
myFunc();
<textarea id="tarea">Testing & < ></textarea>
Note that both of those append, because that's what your code was trying to do; they don't replace the content of the textarea. If you want to do that, set its value to "" before appending the text node.
Actually I've found a similar questions and neither of the answers helped me.
Could someone please help me figuring out how to remove <b> from a variable in js?
What I have is the following:
var p_name_original = $(this).find('td#p_name').html();
alert(p_name_original);
which returnes some text in bold, like <b>text</b>.
How to remove this <b> and </b> from p_name_original? It'd be much better if I could remote it while assigning the value to p_name_original.
Thanks in advance,
AshotAr.
simple: change .html() to .text()
If there are only <b> Tags use this:
function strip(html)
{
var tmp = document.createElement("DIV");
tmp.innerHTML = html;
return tmp.textContent || tmp.innerText;
}
If there are others to:
function strip(html)
{
html = html.replace(/<b>/g, "");
html = html.replace(/<\/b>/g, "");
return html;
}
try this
var p_name_original = $(this).find('td#p_name>b').html();
alert(p_name_original);
I am utterly new to JavaScript and am trying to self-learn a few things - so be gentle.
I am trying to set a variable using document.getElementById(' ').innerHTML but I can't get it to work - I just get "undefined" returned when I try to use this variable.
All of the examples I have seen says that this should work, but it isn't and I'm at my wits' end. Any help will be greatly appreciated.
This is the code...
<script>
var str = document.getElementById('str').innerHTML;
function calc()
{
if(document.getElementById('checkbox').checked)
document.getElementById('str').innerHTML = str ;
else
document.getElementById('str').innerHTML='unchecked';
}
</script>
Checkbox: <input type="checkbox" id="checkbox" name="checkbox" onclick="calc();"/>
<div>Str: <span id="str">6</span></div>
My ultimate aim is to add a number to the variable "str" using another variable; so something like...
var str = document.getElementById('str').innerHTML;
var add = 2
function calc()
{
if(document.getElementById('checkbox').checked)
document.getElementById('str').innerHTML = str + add;
else
document.getElementById('str').innerHTML='unchecked';
}
I'm aware that I probably need to parse the str variable as an integer for this, but I've stumbled before I've even got that far.
Please help.
The value of str is determined when the page is loading (and before the element exists). I believe you want it inside calc:
function calc()
{
var span = document.getElementById('str');
var str = span.innerHTML;
var add = 2;
if(document.getElementById('checkbox').checked)
span.innerHTML = str + add;
else
span.innerHTML = 'unchecked';
}
The problem is that your span is below the script and actually str is not still there. Here is an example which works http://jsfiddle.net/krasimir/2C25E/
<script>
function calc() {
var str = document.getElementById('str').innerHTML;
var add = 2;
if(document.getElementById('checkbox').checked)
document.getElementById('str').innerHTML = parseInt(str) + add;
else
document.getElementById('str').innerHTML='unchecked';
}
</script>
Checkbox: <input type="checkbox" id="checkbox" name="checkbox" onclick="calc();"/>
<div>Str: <span id="str">6</span></div>
Also you should use parseInt to be sure that you get a Number and not a String.
if you had included the script in side the <head>tag This will work for you.
function calc() {
var str = document.getElementById('str').innerHTML;
//more code
Try this, a working version and a bit optimised:
var str = document.getElementById('str');
var chk = document.getElementById('checkbox');
var add = 2
function calc() {
chk.checked ? str.innerHTML = parseInt(str.innerHTML) + add : str.innerHTML = 6;
}
chk.onchange = function () {
calc();
};
Demo here
I got an HTML string as :var code; I want to extract all hyper link title values in this big string and place them in textarea. I tried the following but it never works. could any one tell me what i am doing wrong?
sample hyperlinks to look for(i want to extract mango,cherry,...) :
mango
cherry
my code string has blocks of data like below:
<div class="details">
<div class="title">
mango
<span class="type">3</span>
</div>
</div>
full code:
$.getJSON('http://anyorigin.com/get?url=http://asite.com/getit.php/&callback=?', function(data){
//$('#output').html(data.contents);
var siteContents = data.contents;
//writes to textarea
document.myform.outputtext.value = siteContents ;
var start = siteContents.indexOf('<ul class="list">');
var end = siteContents.indexOf('<ul class="pag">', start);
var code = siteContents.substring(start, end);
document.myform2.outputtext2.value = code ;
var pattern = /<a href="([^"]+?)">([^<]+?)<\/a>/gi;
code = code.match(pattern);
for (i = 0; i < code.length; i++) {
document.write($2<br />'));
}
});
</script>
It looks like you're trying to parse HTML with regex. This post has some more info on that topic.
Since this question is tagged as jQuery, you could try something like the following...
Make a jQuery object out of the returned HTML:
$markup = $(data.contents);
Find the anchors:
$anchors = $markup.find('a');
Get the text (or whatever attribute you want from it):
arrText = [];
$anchors.each(function() {
arrText.push($(this).text());
});
Put result into textarea:
$textarea.val(arrText.join(','));
To achive this jquery is the simplest solution, you can try below code
$('a').each(function(){
var copiedTitle = $(this).html();
var previous = $('#test').html();
var newText = previous +"\n"+ copiedTitle;
$('#test').html(newText);
});
JS Fiddle