As a frontend developer specializing in script injection, I have been utilizing Adobe Target to inject scripts. However, this method presents several challenges:
1. It is difficult to debug code errors as my HTML and CSS are wrapped inside ' ' and + in each line within the JavaScript file. This means that any typos or missing elements such as "position: reltive" in the CSS or HTML require thorough inspection of each line.
2. The complexity of the code makes it hard to keep track of everything as it grows.
3. Since all code is contained within one JS file, my code editor lacks necessary extensions and features (such as compilers). Thus, I must manually add ' ' and + at the end of each line, which becomes increasingly tedious with lengthy code files.
Seeking advice on a more efficient way to incorporate HTML+CSS within a JS file while ensuring proper code compilation by the editor, or if there are any VSCode extensions available to simplify this process for better productivity.
var style = document.createElement('style');
style.type = 'text/css';
//CSS GOES HERE //This is an example
var css = '.container-fluid {' +
'height: 400px;' +
'background-color: black;' +
'position: relative;'+
'float: right;'+
'width: 20%;'+
'text-align: center;'+
'right: 230px;'+
'}' ;
if (style.styleSheet) {
style.styleSheet.cssText = css;
} else {
style.appendChild(document.createTextNode(css));
}
var script = document.getElementsByTagName("script")[0];
script.parentNode.insertBefore(style, script);
const anyvar =
'<div id="container-fluid">' +
//HTML CONTENT GOES HERE
'</div>';
// INSERT HTML CONTENT USING JQuery
$(anyvar).insertAfter(".someclass");