当我使用 createElement 并设置它的文本时，我在“查看源”上看不到它

Question

private addStructuredData(el: ElementRef, schema: JsonLdSchemas) {
    const script = this.renderer.createElement('script');
    this.renderer.setAttribute(script, 'type', 'application/ld+json');
    script.text = JSON.stringify(schema);
    this.renderer.appendChild(el.nativeElement, script);
}

我将上述代码作为 Angular 函数。这个想法是创建一个脚本元素，然后将其作为子元素附加到函数中传递的任何元素。

如果你只想通过Inspect Element查看结果，这个功能很好用。架构完美地出现在那里。

虽然当我尝试通过View Source 查看它时，架构并没有出现。有任何想法吗？谢谢

Answer 1

这是意料之中的。当您查看页面的来源时，您将查看服务器发送给您的原始未压缩响应。它不会包含脚本对 DOM 所做的任何修改。

更改将通过在开发者工具中检查元素，或通过检查元素或其祖先之一的innerHTML / outerHTML 可见。

在您的情况下，它所需的源或脚本之一将具有附加新脚本的脚本文本，在 Javascript 中，例如，类似

addStructuredData(el, schema) {
    const script = this.renderer.createElement('script');
    this.renderer.setAttribute(script, 'type', 'application/ld+json');
    script.text = JSON.stringify(schema);
    this.renderer.appendChild(el.nativeElement, script);
}

（或者可能转换成 ES5 而不是 ES6）

但是通过查看您页面的view-source，上述附加的脚本将不可见。