var newItem = document.createElement('div');
newItem.style = ('background-color:red'); 
newItem.className = ('new_class');
newItem.innerHTML = ('<img src="./profitly_files/TimCover1_bigger.jpg" width=50 height=50> some long text with ticker $DDSSD');
var list = document.getElementById('x-auto-1');
list.insertBefore(newItem, list.childNodes[0]);

跨浏览器的解决方案

注意:Internet Explorer 9不支持classList属性。以下代码可以在所有浏览器中运行:

function addClass(id,classname) {
  var element, name, arr;
  element = document.getElementById(id);
  arr = element.className.split(" ");
  if (arr.indexOf(classname) == -1) { // check if class is already added
    element.className += " " + classname;
  }
}

addClass('div1','show')

源码:如何在js中添加类

在JavaScript中向DOM元素中添加类的3种方法

有多种方法可以做到这一点。我将向您展示添加类的三种方法，并阐明每种方法的一些好处。

您可以使用任何给定的方法向元素中添加类，这是检查、更改或删除它们的另一种方法。

className方法-添加单个或多个类并删除或更改所有类的简单方法。 classList方法——操作类的方法;同时添加、更改或删除单个或多个类。它们可以在代码中的任何时候轻松更改。 DOM方式——当根据DOM模型编写代码时，这提供了一个更清晰的代码和类似于className方式的函数。

className方式

这是一种简单的方法，将所有类存储在一个字符串中。字符串可以很容易地更改或追加。

// Create a div and add a class
var new_row = document.createElement("div");
new_row.className = "aClassName";

// Add another class. A space ' ' separates class names
new_row.className = "aClassName anotherClass";
// Another way of appending classes 
new_row.className = new_row.className + " yetAClass";

如果一个元素只有一个类，检查它很简单:

// Checking an element with a single class
new_row.className == "aClassName" ;
if ( new_row.className == "aClassName" )
    // true

删除所有类或更改它们非常容易

// Changing all classes
new_row.className = "newClass";

// Removing all classes
new_row.className = "";

当使用多个类时，搜索或删除单个类是困难的。您需要将className字符串拆分为一个数组，逐个搜索它们，删除所需的字符串，并将所有其他字符串添加回元素。classList方法解决了这个问题，即使类被设置为className方式，也可以使用它。

classList方式

在需要时操作类是很容易的。你可以随心所欲地添加、删除或检查它们!它可以与单个或多个类一起使用。

// Create a div and add a class
var new_row = document.createElement("div");
new_row.classList.add( "aClassName" );

// Add another class
new_row.classList.add( "anotherClass" );
// Add multiple classes
new_row.classList.add( "yetAClass", "moreClasses", "anyClass" );

// Check for a class
if ( new_row.classList.contains( "anotherClass" ) )
    // true

// Remove a class or multiple classes
new_row.classList.remove( "anyClass" );
new_row.classList.remove( "yetAClass", "moreClasses" );

// Replace a class
new_row.classList.replace( "anotherClass", "newClass" );

// Toggle a class - add it if it does not exist or remove it if it exists
new_row.classList.toggle( "visible" );

使用className方法更容易删除所有类或更改为单个类。

DOM方式

如果您以DOM的方式编写代码，这看起来更简洁，并通过设置class属性将类存储在字符串中。

// Create a div, add it to the documet and set class
var new_row = document.createElement( "div" );
document.body.appendChild( new_row );
new_row.setAttribute( "class", "aClassName anotherClass" );

// Add some text
new_row.appendChild( document.createTextNode( "Some text" ) );

// Remove all classes
new_row.removeAttribute( "class" );

当使用单个类时，检查类是很简单的

// Checking when a single class is used
if ( new_row.hasAttribute( "class" ) 
    && new_row.getAttribute( "class" ) == "anotherClass" )
    // true

当使用多个类时，检查或删除单个类使用与className方法相同的方法。但是classList方式更容易实现这一点，即使您将其设置为DOM方式，也可以使用它。

同样值得一看的是:

var el = document.getElementById('hello');
if(el) {
    el.className += el.className ? ' someClass' : 'someClass';
}

如果你想创建一个新的输入字段，例如文件类型:

 // Create a new Input with type file and id='file-input'
 var newFileInput = document.createElement('input');

 // The new input file will have type 'file'
 newFileInput.type = "file";

 // The new input file will have class="w-95 mb-1" (width - 95%, margin-bottom: .25rem)
 newFileInput.className = "w-95 mb-1"

输出为:<input type="file" class="w-95 mb-1">

如果你想用JavaScript创建一个嵌套的标签，最简单的方法是使用innerHtml:

var tag = document.createElement("li");
tag.innerHTML = '<span class="toggle">Jan</span>';

输出将是:

<li>
    <span class="toggle">Jan</span>
</li>

var newItem = document.createElement('div');
newItem.style = ('background-color:red'); 
newItem.className = ('new_class');
newItem.innerHTML = ('<img src="./profitly_files/TimCover1_bigger.jpg" width=50 height=50> some long text with ticker $DDSSD');
var list = document.getElementById('x-auto-1');
list.insertBefore(newItem, list.childNodes[0]);