Question

html = `<!doctype html><title>My title</title><head></head><body><p>hello world</p></body></html>`;
html = $.parseHTML(html);
$(html).find('head').append('<link rel="stylesheet" href="//formbuilder.online/assets/css/form-render.min.css/">');

console.log(html);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

我不知道为什么这不起作用。我想以编程方式将css或js添加到js中的html中。

之后我想将变量下载为something.html，可能吗？

Answer 1

你可以在纯粹的javascript中试试这个：

＆＃13;

// Get the head element
var head = document.head || document.getElementsByTagName('head')[0];

// Create a new style node
var style = document.createElement('style');

// Set type attribute for the style node
style.type = 'text/css';

// Set the css rules
var css = '#test {color:red}';

// Append the css rules to the style node
style.appendChild(document.createTextNode(css));

// Append the style node to the head of the page
head.appendChild(style);

＆＃13;

<span id="test">This is a test text</span>

＆＃13;

更新（附加到正文的链接）

var link = document.createElement('a');
link.setAttribute('href', 'path/to/url');
document.body.appendChild(link);

Answer 2

我不知道为什么这不起作用。

html字符串缺少打开<html>标记。 <title>元素应该是<head>元素的子元素。请注意，doctype声明<!doctype html>未打开<html>元素的标记。

包括打开<html>代码，将<title>放在<head> html字符串中。使用DOMParser()创建document;致电.find()链接到$(doc.documentElement)，选择head doc document html解析DOMParser字符串变量<a>。

然后，您可以使用href元素，doc.documentElement.outerHTML设置为download，something.html属性设置为text/html，将文件另存为<link>在.click()元素上调用<a>包含something.html。

注意，如果您在file:协议下加载http:，除非您在{{1}指定https:或href协议，否则不会将链接的样式表加载到文档中} <link>元素，例如http://formbuilder.online/assets/css/form-render.min.css

var html = `<!doctype html><html><head><title>My title</title></head><body><p>hello world</p></body></html>`;
var parser = new DOMParser();
var doc = parser.parseFromString(html, "text/html");
var doctype = new XMLSerializer().serializeToString(doc.doctype);
$(doc.documentElement).find('head').append('<link rel="stylesheet" href="http://formbuilder.online/assets/css/form-render.min.css"></style>');
console.log(doctype + doc.documentElement.outerHTML);
$("<a>", {
    href: "data:text/html," + doctype 
          + doc.documentElement.outerHTML,
    download: "something.html"
})
.appendTo("body")[0].click()

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body></body>

Answer 3

你可以试试这个，

var list = document.getElementsByTagName("head")[0];
document.getElementsByTagName("head")[0].innerHTML =list+
"<link rel='stylesheet' href='//formbuilder.online/assets/css/form-render.min.css'</style>";

Answer 4

试试这个：

var inst = Activator.CreateInstance(finalType);

添加样式表到javascript到html不起作用

4 个答案: