Develop Reference

How to get input text from text edit

I have simple text editor, where user can use bold/italic etc format for input. This is simply generating text in div container of id="sampleeditor", so if user want bold it`s just adding html tag , italic so the generated dom code for BOLD ENTER ITALIC will looks like:
<div class="editor" id="sampleeditor" contenteditable="true">
<b>BOLD</b>
<div><b>
<i>ITALIC</i>
</b>
</div>
</div>
The thing is that i want to fetch whole user input data which are stored in the main div and save it to json file, but when i try to get that div value:
var x = document.getElementById("sampleeditor").value;
console.log(x);
It`s just loging - undefined, so how to target whatever is inside that div?

Divs do not have value properties, you have to use inner html
var x = document.getElementById("sampleeditor").innerHTML;
console.log(x);

this is my solution
var x = document.getElementById("sampleeditor").innerText;
console.log(x);

let x = document.querySelector(".editor");
console.log(x.textContent);
<div class="editor" id="sampleeditor" contenteditable="true">
<b>BOLD</b>
<div>
<b>
<i>ITALIC</i>
</b>
</div>
</div>

Appending text to div without overwriting existing childs in dojo

I have the following HTML template:
<div class="thisDiv" data-dojo-attach-point="thisDivAttachPoint">
<img src="images/someImage.png" class="someImage"
data-dojo-attach-event="onClick:_doSomething"/>
</div>
Now, in my accompanying js, I am evaluating some text which I want to place in this div before the image.
var stringToPlace = "This is the text for thisDiv";
this.thisDivAttachPoint.innerHTML = stringToPlace;
However, doing this results in:
<div class="thisDiv" data-dojo-attach-point="thisDivAttachPoint">
This is the text for thisDiv
</div>
That is, the image is getting lost.
What do I do so that the result is such that the text is "prepended" before the image. That is:
<div class="thisDiv" data-dojo-attach-point="thisDivAttachPoint">
This is the text for thisDiv
<img src="images/someImage.png" class="someImage"
data-dojo-attach-event="onClick:_doSomething"/>
</div>
I also tried:
domConstruct.place(stringToPlace, this.thisDivAttachPoint, "first");
But this gives error as:
parameter 1 is not of type 'Node'
I also tried:
this.thisDivAttachPoint.innerHTML = stringToPlace + this.thisDivAttachPoint.innerHTML;
After doing this, visually it is as expected i.e. text and then the image. However, the onClick:_doSomething on the image is not getting invoked. What am I missing? Inspecting the element shows that onClick:_doSomething is there. But click doesn't do anything. No errors.

This worked.
domConstruct.place(domConstruct.toDom(stringToPlace), this.thisDivAttachPoint, "first");
This results exactly in what I want. Issue was, we need to convert the String to node before using in place.
Dom-Construct Documentation

How to replace a <p> tag in an html file using Javascript

In an Html file that I have, there is a paragraph tag that basically looks like this:
<p class="col-sm-8 form-control-static wordwrap">
Hey
What's
Up
</p>
The contents of this paragraph are grabbed from a textarea that a user fills out and the value of this textarea is grabbed via jquery and filled into this element.
The output looks like this: Hey What's Up
This paragraph tag ignores the newlines within the paragraph, so the paragraph displays all on one line. Due to the format and layout of the project, I can't necessarily change the html source. I was wondering if there was a way to change this exact element to be:
<pre class="col-sm-8 form-control-static wordwrap">
Hey
What's
Up
</pre>
using only javascript. Is this possible? This is so my output will keep the newlines.

I think you are looking for something like this. you tagged jquery so I used that but this could be done in vanilla js too.
I linked to a onkeyup event if you wanted to change to use the button only if you wanted
$(document).ready(function(){
function updateContent() {
$('#p1').html($('#source').val());
}
$('#update').on('click', function(e){
updateContent();
// add other stuff here
// for only the click event
})
$('#source').on('keyup', updateContent);
})
button {
display:block;
}
#source {
height:100px;
}
#p1{
white-space:pre;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="source" placeholder="Update content and click 'update'">new content
add line breaks and <p>html markup</p>
</textarea>
<button id="update" >Update</button>
<p id="p1">THIS WILL CHANGE!</p>

It is very simple and has been asked before... BUT here it is, using DOM:
document.getElementById("p1").innerHTML = "<p>This</p><p>Has</p><p>Changed!</p>";
<p id="p1">THIS WILL CHANGE!</p>
So your piece of code you need is:
document.getElementById("p1").innerHTML = "New text!";
EDIT
This is simpler, easier and more browser friendly than using <pre> tags. Therefore, I would highly recommend you to use this instead.

Send text without html tags

I want to build some function in JavaScript, that sends text from textarea to a div.
I want it do the following
If the user tries to send html source to a textarea, it will show the
text, and not the actual html source.
For example:
If the user tries to send: <img src='aa.png'>
I want to see in the div the text: <img src='aa.png'>, and don't want to see the actual image: aa.png

Use .innerText or .textContent instead of .innerHTML
eleme.innerText="<img src='aa.png'>"; where eleme is your div
DEMO:
document.getElementById('test1').innerHTML="<img src='aa.png'>";
document.getElementById('test2').innerText="<img src='aa.png'>";
document.getElementById('test3').textContent="<img src='aa.png'>";
<div id="test1"></div>
<div id="test2"></div>
<div id="test3"></div>
You can read more for differences between this three commands and others Here

change html text from link with jquery

a simple question here
Is there a way to change the text "click here"
<a id="a_tbnotesverbergen" href="#nothing">click here</a>
in this link
Richard

You have to use the jquery's text() function. What it does is:
Get the combined text contents of all
matched elements.
The result is a
string that contains the combined text
contents of all matched elements. This
method works on both HTML and XML
documents. Cannot be used on input
elements. For input field text use the
val attribute.
For example:
Find the text in the first paragraph
(stripping out the html), then set the
html of the last paragraph to show it
is just text (the bold is gone).
var str = $("p:first").text();
$("p:last").html(str);
Test Paragraph.
Test Paragraph.
With your markup you have to do:
$('a#a_tbnotesverbergen').text('new text');
and it will result in
<a id="a_tbnotesverbergen" href="#nothing">new text</a>

The method you are looking for is jQuery's .text() and you can used it in the following fashion:
$('#a_tbnotesverbergen').text('text here');

$('#a_tbnotesverbergen').text('My New Link Text');
OR
$('#a_tbnotesverbergen').html('My New Link Text or HTML');

You need J-query library to do this simply:
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
First you need to put your element in div like this:
<div id="divClickHere">
<a id="a_tbnotesverbergen" href="#nothing">click here</a>
</div>
Then you should write this J-Query Code:
<script type="text/javascript">
$(document).ready(function(){
$("#a_tbnotesverbergen").click(function(){
$("#divClickHere a").text('Your new text');
});
});
</script>

I found this to be the simplest piece of code for getting the job done. As you can see it is super simple.
for
original link text
I use:
$("#sec1").text(Sector1);
where
Sector1 = 'my new link text';

From W3 Schools HTML DOM Changes: If you look at the 3rd example it shows how you can change the text in your link, "click here".
Example:
<a id="a_tbnotesverbergen" href="#nothing">click here</a>
JS:
var element=document.getElementById("a_tbnotesverbergen");
element.innerHTML="New Text";

try this in javascript
document.getElementById("22IdMObileFull").text ="itsClicked"