In HTML, the srcdoc attribute is used with the <iframe> tag to specify inline HTML content displayed within a frame.
Definition and Usage
➔ This allows embedding an HTML document directly within the markup of the embedding page or main page.
Syntax
//In HTML
<iframe id="sampleid"
srcdoc="<h1>srcdoc Example</h1><p>This content is directly embedded in this page using the srcdoc attribute.</p>">
Your browser does not support this element.
</iframe>
//In JavaScript
const element= document.getElementById('sampleid');
const htmlContent = `
<!DOCTYPE html>
<html>
<head>
<title>srcdoc Example</title>
</head>
<body>
<h1>srcdoc Example using variable</h1>
<p>This content is directly embedded in this page using the srcdoc attribute.</p>
</body>
</html>
`;
// Set the srcdoc property
element.srcdoc = htmlContent;
//Or
element.setAttribute('srcdoc ', htmlContent);
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML srcdoc attribute example</title>
</head>
<body>
<h3>HTML srcdoc attribute example</h3>
<p>The srcdoc attribute is used to embed inline HTML content in an iframe.</p>
<iframe id="sampleid"
srcdoc="<h1>srcdoc Example</h1><p>This content is directly embedded in this page using the srcdoc attribute.</p>">
Your browser does not support this element.
</iframe>
</body>
</html>
Click on the "Try it Now" button to see how it works.