I've got a text area and I'm attempting to append a div to it. I'm trying to do it with Jquery like this...
var text = '<div class="item"><a class="as">q</a>test</div>';
$('#textArea').append(text);
The code runs without throwing any errors but my text doesn't appear inside the textarea. Why does this happen?
Do you want to add it to the HTML structure or simply show the HTML Code as text ?
If you want to add it to the textarea HTML structure this will not work.
What you are searching for is
$('#textArea').text(text); or $('#textArea').text($('#textArea').text()+text);
.text() sets text of your textArea
.html() would set your html Content
You can't append to a textarea. Its text content behaves like other input.
var text = '<div class="item"><a class="as">q</a>test</div>';
$('#textArea').val( $('#textArea').val() + text);
Try:
$('#textArea').val(text);
If you don't want to render the div's contents but simply want to display the HTML inside the textarea you need to convert the HTML first:
var lt='<';
var gt='>';
var text = '<div class="item"><a class="as">q</a>test</div>';
text = text.replace(/</gi, lt);
text = text.replace(/>/gi, gt);
$('#textArea').append(text);
And the HTML for the text area should look like this:
<textarea id="textArea"></textarea>
If you do want to render the div's contents inside the textarea use:
var text = '<div class="item"><a class="as">q</a>test</div>';
$('#textArea').append(text);
The HTML for the text area is the same as in the other example:
<textarea id="textArea"></textarea>
You cannot put div in textarea but sometimes you need to do so. Good news is that you can do it in other way by using contenteditable property of elements. Like
<div contenteditable="true" style="min-height:50px; width:300px;" id="txtDiv">
</div>
This Div will behave exactly like a Textarea but you can append anything you want. And remember when you want to grab data from inside it in jquery
var ContentofDiv = $('#txtDiv').html();
Related
I'm looking to design a form that will accept HTML tags and convert them into styled text displayed in a separate text area. Think a very simple JSbin. I thought that this would work:
document.getElementById('tagName').innerHTML='variable'
But this displays the text along with the tags - I just want the tag.
I need some helpful hints or a nudge in the direction I should go. Thanks!
Take a look at https://gomakethings.com/two-ways-to-get-and-set-html-content-with-vanilla-javascript/ you want to use .textContent to get the text without the tags.
document.getElementById('text').innerHTML=document.getElementById('html-elements').textContent
<div id="html-elements">
<button>hello</button> <strong><em>world</em></strong>
</div>
<div id="text"></div>
I think what you're looking for is contenteditable attr.
You can use that attribute in order to make editable a DOM element like div, span, p, and so on.
For more info go to Making content editable
On the order hand, to be able to write HTML from a textarea and the entered HTML text be rendered into the contenteditable element, you need to bind some kind of event in order to get the wrote HTML and then set it into the target contenteditable element.
var variable = '<b>EleFromStack</b>',
tagName = document.getElementById('tagName'),
textarea = document.getElementById('textarea');
textarea.addEventListener('input', function() {
tagName.innerHTML = this.value;
});
div {
width: 300px;
border: 1px dashed #000
}
<textarea id='textarea'>
</textarea>
<div id='tagName' contenteditable='true'>
</div>
I think what you want to do is create an input then listen to the value changes and display the inner html in another div
<!-- HTML -->
<input type="text" id="input"></input>
<div id="output"></div>
Then listen to the change and update the output
//JS
const input = document.querySelector('#input'),
output = document.querySelector('#output');
button.addEventListener('change', () => {
output.innerHTML = input.value;
})
(JSBIN: https://jsbin.com/genokox/edit?html,js,console,outputjsbin)
The problem is you're trying to write HTML into a text area. The text area is reserved, by the browser engine, to post plain text. Instead of writing out your content to a textarea write it to a DIV or some other content block designed to contain HTML.
I have the following which is fine, it does convert the <p> tags into <br> and wrap the whole text in a <p>. however I am seeing the html tags <p> and <br> inside the text area, how can I only see the line breaks without to see the html tags in it?
<textarea id ="usp-content"><textarea>
$(blurbt).find('p').each(function(){
$( this ).replaceWith( $( this ).text() + "<br/>" );
});
$(blurbt).wrapInner("<p></p>");
var pOnly = $(blurbt).html();
$('#usp-content').text(pOnly);
I'd simply would like to paste the plain text while keeping the line breaks visually not with the <br>
You don't need to use a contenteditable="true".
You can simple do the following:
Change $('#usp-content').text(pOnly); to:
$('#usp-content').val(pOnly.replace(/<br[\s\/]*>/gm, "\n"));
To reverse this incase you are sending the content of the textarea to server side and want html markup, simply use:
var data = $('#usp-content').val().replace(/\\n/gm, "<br>");
We cannot render the html inside a textarea we need to use a contenteditable in a div, see SO Answers here. Therefore in my case I will have to place a div with html formatted and set the textarea as hidden to get the same value as per what user sees.
<div contenteditable="true"></div>
I have a textarea that contains variable html content which is always wrapped in a paragraph (p) tag.
HTML (before appending):
<textarea rows='7' class='form-control' id='comments'><p>My variable HTML content.</p></textarea>
I fetch this content using the following in jQuery:
jQuery:
$('#comments').val();
Now I need to append HTML at the end of this paragraph but inside the p tag.
HTML (after appending):
<textarea rows='7' class='form-control' id='comments'><p>My variable HTML content. Some appended HTML.</p></textarea>
I can of course replace the last 4 characters of the above (which is the closing p tag), then append my HTML and then add the closing p tag again.
Can someone tell me if there is a better way to achieve the same in jQuery ?
Many thanks in advance for this, Tim.
Parse the string value of the textarea as HTML, and insert whatever you like, then pass the string value of the HTML back
$('#comments').val(function(_, val) {
return $('<div />', {html:val}).find('p').append('content').end().html();
});
FIDDLE
This could do the trick
var html = $('#comments').val();
$('#comments').val(
$(html).append(' Some appended HTML.')[0].outerHTML
);
DEMO
You could insert the value into a temporary div, add an element to the <p>-element inside the temporary div and fetch the renewed content again:
var tmpDiv = $('<div></div>'); //create temporary element
tmpDiv.html($('#comments').val()); // add HTML from textarea
$(someHtml).appendTo($('p', tmpDiv)); // append custom HTML to P inside temp element
newTextAreaValue = tmpDiv.html(); // retrieve new value
Ok. I REALLY love this!
$('#comments').text($($('#comments').text()).append(' a new insert!').text());
Don't look at it too long. Could hurt your eyes :-)
Say, I highlighted this text The Title is Superman and Batman in my page.
How can i get the text including it's HTML element?
Based on my example, I should get this:
The Title is <i>Superman</i> and <i>Batman</i>
Use jquery html selector to get the value with HTML selector.
HTML:
<div id="test">this is my <i>test</i></div>
JS:
$('#test').html()
You should take the values adding a class or id.
HTML:
<div class="test"><i>Superman</i></div>
<div class="test"><i>Batman</i></div>
JS:
$('.test').html()
Live Example
Since everyone is requiring OP to use jQuery, here's the native JS equivalent. You can select the html content of an element like so :
var html = document.getElementById('text-container').innerHTML;
You might want to redisplay all the HTML from the container as different values, eg. as HTML markup, as text, as HTML-encoded text. With that I mean HTML entities (eg. > for > (greater than sign)). Here are the methods for displaying different types of output each time:
Here's a variable for the subsequent code:
var target = document.getElementById('text-output'); // for later
1. HTML in a container element
Output: Rendered HTML
Javascript:
target.innerHTML = html;
2. Text in a container element
Output: Text, HTML entities encoded
Javascript:
// will automatically encode HTML entities
var text = document.createTextNode(html);
target.innerHTML = text;
3. HTML in a textarea element
Output: Text, HTML entities non-encoded
Javascript:
yourTextArea.value = html;
4. Text in a textarea element
Output: Text, HTML entities encoded
Javascript:
// The virtual container automatically encodes entities when its .innerHTML
// method is called after appending a textnode.
var virtualContainer = document.createElement('div');
var text = document.createTextNode(html);
virtualContainer.appendChild(text);
yourTextArea.value = virtualContainer.innerHTML;
Demo: http://jsbin.com/mozibezi/1/edit
PS: It is impossible to display the output from #4 in a non-form input.
I have extjs htmleditor with textarea. ANd i want to get selet html value.
Fiddle is here:
http://jsfiddle.net/DCGRg/76/ - you can trigger event by entering something and adding styles and then clicking on the combobox at toolbar right.
i saw the code like that, but it's not getting me html, just text is getting:
content = selection.extractContents();
//create span and wrap it around selection
fontEl = document.createElement("span")
fontEl.appendChild(content);
text = fontEl.innerHTML
The question is: how to get html from textarea?
InnerHTML only returns only the child contents, outerHTML is return with current note.
For Example:
"sample text" => using innerHTML => sample text
"sample text" => using outterHTML => <span>sample
text</span>
I changed in your code innerHTML as outerHTML like bellow please check the sample
text = fontEl.outerHTML;