Develop Reference

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.

JavaScript - Use innerHTML as actual html instead of plain text

When I'm trying to change document.documentElement.innerHTML using the innerHTML of a textarea like this:
document.documentElement.innerHTML = document.querySelector('#mytextarea').innerHTML
The innerHTML of #mytextarea is not used as actual HTML to change the DOM, but as plain text.
For example: if the innerHTML of #mytextarea is <p>A paragraph</p>.
Then the document after loading looks like: <p>A paragraph</p> instead of A paragraph
How should I do it so the value inside the #mytextarea could be used to change the DOM? (ex. appending new elements)

Use .value to get the contents of a textarea without it being encoded.
document.getElementById("documentElement").innerHTML = document.querySelector('#mytextarea').value;
<textarea id="mytextarea">
<p>A paragraph</p>
</textarea>
<div id="documentElement">
</div>

You can easily achieve this without the use of any JavaScript. You just have to insert special characters into your HTML code.
<p>A paragraph</p>
That weird code will show up as
<p>A paragraph</p>
If you don't know the codes, just use this: HTML Encoder
EDIT:
They are called HTML escape characters, or, HTML entities. Here is a list of a lot of them: List

Change only text (Jquery)

I have a small problem that i cannot solve.I have this : <p>Text<span></span></p> and i want to change only the text of the <p>.Which means, when i click on an change-Button, the text based on an input field should replace the text.
What i have tried is something like this : $("p").text("newText") but this will also remove the <span>.
So how can i only change the text and not the inner html...

With your HTML above you can do
$('p').contents().first()[0].textContent='newText';
The idea is to take advantage of the fact that contents() includes text-nodes. Then, access by index [0] to get the native javascript DOM element and set the textContent
$('p').contents().first()[0].textContent = 'newText';
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<p>Text<span>inside span</span>
</p>

Put another span inside of the p tag and only change its contents:
<p>
<span id="theText">Text</span>
<span></span>
</p>
And then:
$('#theText').text('newText');
$('#theText').text('newText')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
<span id="theText"></span>
<span>some other span</span>
</p>

what is the most straightforward way of writing the content of a variable to page?

I have a <p></p> and I want to put a text inside it a text that a JS variable holds,
is it possible to put a <script> inside the <p> and just write it there, without using any kind of DOM searching (not even innerHTML)?

<p>
<script>
var theVariable="this has some content";
document.write(theVariable);
</script>
</p>
hope that helps and is what you wanted.
Demo

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"