We Keep Coding

Add HTML code in .html files with javascript

I'm developing a website with bootstrap.
If I want to modify the navbar, I don't want to go to any html files and make changes.
So would like to use javascript to "inject" the html code into the actual html file but I don't know how to do it.
This is what I tried.
document.write("<p>html code here</p>")
It, however, doesn't work. What the most conveniente and simple solution could be?

You can try something like this example below:
let newElement = document.createElement('div');
newElement.className = 'new-element';
This will create a div - assign it to the variable named 'newElement' and creating a class associated with that element named "new-element".

Toopltip only in Javascript (&Not every tooltip on the whole page)

How can I do this(or something alike this) tooltip in only javascript without linking any template styles (I don't want to implement It to all the tooltips on the whole page). I'm designing the webpage on SharePoint which deletes all the ...
https://www.w3schools.com/css/tryit.asp?filename=trycss_tooltip_top

You can always add inline styles via JS.
var a = document.getElementsByClassName("class-name");
a.forEach(function(e) {
e.style.property = "value";
});
For adding :hover effects however, I think you need to append a stylesheet. Example.
Your other option is to use mouseover effects, but that is ridiculous when :hover exists.

Add CSS class in Angular

I have two places need to add a css class called myClass dynamically. I only want to add this class when $root.myBool is true. I got one of them work using this:
<ion-side-menu-content class="ng-class: $root.myBool ? 'myClass' : ''">
But I can't get the other one work. Here's the issue, this one above is written in cshtml directly. But the other one is added using angularJS inside javascript file. The other one looks like this in .js file var container = jqLite("<div class='class1 class2'>"); I want to add myClass right after class2, something like:
var container = jqLite("<div class='class1 class2 ng-class: $root.myBool ? 'myClass' : '''>");
I tried, but couldn't make it work. Hope someone can help..
Also I have a second idea to achieve this, since myClass is really only one line of style:
.myClass {
top: 78px;
}
So I was thinking maybe I also can change the top attribute inside javascript. So I'll add the class like this var container = jqLite("<div class='class1 class2 myClass'>");
Then change the top attribute inside the javascript where I change myBool:
$scope.myBool = false;
//get 'myClass' somehow and change the attribute 'top' here.
I know for jQuery I can do $('.myClass').css("top", "0px");. But I'm using ionic here, so the syntax is different, that's my issue.
So there're two ways I can think of to do this, make either one works will be more than enough for me. Thanks a lot!

If you generate HTML on the fly, you need to $compile it:
$compile(container)(scope);
SO question
Explanation and examples
Furthermore, I think writing ngClass as its own attribute in the form of ng-class="{'myClass': $root.myBool}" is much cleaner and less error-prone than the form inside a class attribute.
Tying it together:
var container = "<div class='class1 class2' ng-class=\"{'myClass': $root.myBool}\">";
element.append($compile(container)($scope);
There's not need to run it through jqLite before compiling it.

In my opinion you could use simply ngClass and ngStyle:
Controller:
$scope.topPx = '20px';
HTML:
<ion-side-menu-content ng-class="{'myClass': $root.myBool}" ng-style="{'top': topPx}">

Javascript - Execute HTML/Angular ng-include

I'm using AngularJS to design a small app for searching. I have a div that's currently empty, and after running a function, for it to replace it with a div that has ng-include. The div replaces just fine, but ng-include doesn't load up.
I'm currently running the following in console for testing to see get it running. How would I go about getting this to work? Any help is appreciated!
document.getElementById("resultsDiv").innerHTML = '<div ng-include="" src=" \'sr.html\' "></div>';

read about angularjs $compile function

I don't know why you need to make this JavaScript-call, but its definitely no the 'angular-way'. If you need to conditionally include html, i would recommend using ng-if, ng-hide, ng-show or even ng-switch.
You could do something like this:
// somewhere in your controller
$scope.triggerSomeInclude = true;
// in your template
<div ng-if="triggerSomeInclude">
<div ng-include ="'someFile.html'"></div>
</div>
Another approach would be using a directive. They are the only place, where selecting an element directly could make sense (although even there it usually doesn't to select an element via id). But as I said, it's hard to stay what the best method would be, as I'm not sure what you're trying to achieve.
Although you're not using jQuery, what you're trying to do looks very jQueryesque (awful word) as you're selecting an element directly seemingly totally detached from the $digest and $compile-cycles of angular, so I also would recommend to read this answer:
"Thinking in AngularJS" if I have a jQuery background?

In the end, the method I used was templating example used for ngInclude.
http://docs.angularjs.org/api/ng.directive:ngInclude
Inside my controller, for example, by default it would set the following:
$scope.mainDivTemplate = {url: 'partials/test1.html'}
If I wanted to switch it to something else, I'd call a function that would look a little something like this.
$scope.loadHome = ->
$scope.mainDivTemplate = {url: 'partials/home.html'}
$scope.$apply()

Create new (not change) stylesheets using jQuery

We've got a little tool that I built where you can edit a jQuery template in one field and JSON data in another and then hit a button to see the results immediately within the browser.
I really need to expand this though so the designer can edit a full CSS stylesheet within another field and when we render the template, it will have the CSS applied to it. The idea being that once we've got good results we can take the contents of these three fields, put them in files and use them in our project.
I found the jQuery.cssRule plugin but it looks like it's basically abandoned (all the links go nowhere and there's been no development in three years). Is there something better or is it the only game in town?
Note: We're looking for something where someone types traditional CSS stylesheet data in here and that is used immediately for rendering within the page and that can be edited and changed at will with the old rules going away and new ones used in their stead. I'm not looking for something where the designer has to learn jQuery syntax and enter in individual .css("attribute", "value") type calls to jQuery.

Sure, just append a style tag to the head:
$("head").append("<style>p { color: blue; }</style>");
See it in action here.
You can replace the text in a dynamically added style tag using something like this:
$("head").append("<style id='dynamicStylesheet'></style>");
$("#dynamicStylesheet").text(newStyleTextGoesHere);
See this in action here.

The cleanest way to achieve this is by sandboxing your user-generated content into an <iframe>. This way, changes to the CSS won't affect the editor. (For example, input { display:none; } can't break your page.)
Just render out your HTML (including the CSS in the document's <head>, and write it into the <iframe>.
Example:
<iframe id="preview" src="about:blank">
var i = $('#preview')[0];
var doc = i.contentWindow || i.contentDocument;
if (doc.document) doc = doc.document;
doc.open('text/html',true);
doc.write('<!DOCTYPE html><html>...</html>');
doc.close();

If the user should be able to edit a whole stylesheet, not only single style attributes, then you can store the entered stylesheet in a temporary file and load it into your html document using
$('head').append('<link rel="stylesheet" href="temp.css" type="text/css" />');

sounds like you want to write an interpreter for the css? if it is entered by hand in text, then using it later would be as simple as copy and pasting it into a css file.
so if you have a textarea on your page to type in css and want to apply those rules when you press the button, you could use something like this (only pseudocode, needs work):
//for each css id in the text area
$.each($('textarea[name=cssTextArea]').html().split('#'), function({
//now get each property
$.each($(this).split(';'), function(){
$(elem).css({property:value});
});
});
then you could write something to go through each element that your designer typed in, and get the current css rules for it (including those that you applied using some code like the snippet above) and create a css string from that which could then be output or saved in a db. It's a pain and much faffing around with substrings but unfortunately I don't know of a faster or more efficient way.
Hope this atleast gives you some ideas