We Keep Coding

How to make the code work with other tags and add class to it?

I'm using the following code to automatically copy selected text:
function copy(elem){
if($(elem).text()){
var dummy = document.createElement("textarea");
document.body.appendChild(dummy);
dummy.value = $(elem).text();
dummy.select();
document.execCommand("copy");
document.body.removeChild(dummy);
}else{
input = $(elem).val();
elem.select();//Select the text in the input element
document.execCommand('copy');//copy it
}
$(elem).next().text('discount code has been copied);
setTimeout(function(){$(elem).next().text('');}, 2000);//
}
`
I have two questions regarding that code:
If I want to use it in my post, I'm adding this code: <p class="kod-rabatowy" onclick="copy(this)">example text that needs to be copied</p> in text editor. The thing is that the whole script only works with <p> tags - I really need to display the text in the same line. How can I make it work with other tags as well (<b> would be perfect)?
How can I add class to the whole script so I could style the text saying that the code has been copied? Here you can see how it works now: http://test2.gromocje.pl/?p=21 (click on "test" button and you'll copy it).

Looks like it's working fine with (I don't know about Wordpress posts): https://jsbin.com/yoropunebu/edit?html,css,js,output
I also added the class thing you wanted:
$(elem).next().addClass("copied-response").text('discount code has been copied');

Convert HTML tags and display as styled text using javascript

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.

Ace Editor remove my HTML tags

Here's my html:
...<div class="myclass"><label>Default</label></div>
my javascript:
ace.edit(el); // where el is the dom element div.myclass shown above
The editor is rendered properly!
The editor only comes up with "Default". No html to edit.
When I look at the code in debug mode on chrome, I see that the edit function retrieve the value of my element using (line 18474):
value = dom.getInnerText(el);
Which in turn result in:
return el.textContent;
then el innerHTML is blanked using (18475):
el.innerHTML = '';
This seems very strange to me. el.innerHTML correctly displays
"<label>Default</label>"
Is it me or there's something wrong?
How can I edit the html content of a div using Ace editor if this is normal behavior? What am I missing?
Thanks

Found an answer here
https://github.com/ajaxorg/ace/issues/519
I'll try it and let you guys know if this doesn't solve it
You basically need to
el = document.getElementById("editor"); text = el.innerHTML editor = ace.edit(el) editor.session.setValue(text)

Ace uses textContent instead of innerHTML because it's not possible to pass arbitrary text using innerHTML. E.g if you have '<div class="myclass">' innerHTML will make it '<div class="myclass"></div>' and <script>alert('haha')</script> will display alert dialog.
You can use textarea or xmp tag, to not make browser parse the text but there again you need to escape </textarea. So the sanest way is to escape special html characters like < and & and use textContent.

If your code content has HTML use textarea as the container to call on Ace Editor
Atention
On C# and Javascript use innerText a not ~~innerHtml~~.
Example
HTML
<textarea id="aceeditorcontent" runat="server" clientidmode="Static"></textarea>
<script>
var aceeditor = ace.edit("aceeditorcontent", {
theme: "ace/theme/chrome",
mode: "ace/mode/html_ruby",
maxLines: Infinity,
showPrintMargin: false,
wrap: true,
autoScrollEditorIntoView: true,
enableSnippets:true
});
</script>
Csharp
aceeditorcontent.InnerText = "<html>......</html>";
javascript
document.getElementById("aceeditorcontent").innerText = "<html>......</html>";

How can i get the string including HTML element after highlighting the text in HTML using Javascript?

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.

append div to text area?

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();